块级元素水平垂直居中方法

冷不防 2022-02-19 10:51 252阅读 0赞

**目录**

一.脱离文档流

1.有没有宽高都可以

2.必须要有宽高

二.没有脱离文档流

1.有无宽高都可

2.有宽高

--------------------

# 一.脱离文档流 #

只要是脱离文档流,都是使用的是父相子绝(父块相对定位,子块绝对定位),

有三种方式:

有无宽高都可
        1.父相子绝 可以使用 margin:auto
        2.父相子绝 transform:translatex
    有宽高
        3.父相子绝 margin-top 一半

## 1.有没有宽高都可以 ##

下面两种方法都是需要父相子绝(父块相对定位,子块绝对定位),在子块中设置

方法一 margin:auto

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    			
    .box1{
        width:100%;
        height:100%;				
        border:1px solid red;					
    }
    .box2{
        width:400px;
        height:400px;
        background-color:skyblue;
        position: relative;						
    }
    .box3{
        width:100px;/*1.width:90%也可以 2.不设置宽也可以*/
        height:100px;/*1.height:90%也可以 2.不设置高也可以*/
        background-color: gray;
        position: absolute;
        top:0;
        right:0;
        bottom: 0;
        left: 0;
        margin:auto;			
    }			
    </style>
    </head>
    <body>
    <div class="box1">
        <div class="box2">div2<div class="box3">div3</div></div> 
    <div>	
    </body>
    </html>

方法二 transform:translate:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    			
    .box1{
        width:100%;
        height:100%;				
        border:1px solid red;					
    }
    .box2{
        width:400px;
        height:400px;
        background-color:skyblue;
        position: relative;						
    }
    .box3{
        width:100px;/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
        height:100px;/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
        background-color: gray;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);			
    }
    </style>
    </head>
    <body>
    <div class="box1">
        <div class="box2">div2<div class="box3">div3</div></div> 
    <div>
    </body>
    </html>

## 2.必须要有宽高 ##

方法一 margin-top margin-left

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    			
    .box1{
        width:100%;
        height:100%;				
        border:1px solid red;					
    }
    .box2{
        width:400px;
        height:400px;
        background-color:skyblue;
        position: relative;						
    }
    .box3{
        width:100px;/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
        height:100px;/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
        background-color: gray;
        position: absolute;
        top:50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;				
    }
    </style>
    </head>
    <body>
    <div class="box1">
        <div class="box2">div2<div class="box3">div3</div></div> 
    <div>		
    </body>
    </html>

# 二.没有脱离文档流 #

有3种方法

有无宽高都可:
    1.(父)
      display:flex;/*将其定义为弹性容器*/
      align-items: center;/*垂直居中对齐*/
      justify-content: center;/*水平居中对齐*/
    
    2.
     (父)display:flex
     (子)margin:auto
    
    有宽高
    1.
     (父)display:table-cell;
        vertical-align: middle;(垂直居中)
     (子)margin:0 auto(水平居中)

## 1.有无宽高都可 ##

方法一:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    			
    .box1{
        width:100%;
        height:100%;				
        border:1px solid red;					
    }
    .box2{
        width:400px;
        height:400px;
        background-color:skyblue;				
        display:flex;/*将其定义为弹性容器*/
        align-items: center;/*垂直居中对齐*/
        justify-content: center;/*水平居中对齐*/
    }
    .box3{
        /* 宽高可以不设置
        width:100px;
        height:100px;*/				
        background-color: gray;																		
    }
    </style>
    </head>
    <body>
    <div class="box1">
    	<div class="box2"><div class="box3">div3</div></div> 
    <div>
    </body>
    </html>

方法二:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    			
    .box1{
        width:100%;
        height:100%;				
        border:1px solid red;					
    }
    .box2{
        width:400px;
        height:400px;
        background-color:skyblue;
        position: relative;
        display:flex;/*最新特性*/					
    }
    .box3{
        /*有无宽高都可以*/
        /*width:100px;
        height:100px;*/				
        background-color: gray;		
        margin:auto;							
    }
    </style>
    </head>
    <body>
    <div class="box1">
        <div class="box2"><div class="box3">div3</div></div> 
    <div>
    </body>
    </html>

## 2.有宽高 ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    			
    .box1{
        width:100%;
        height:100%;				
        border:1px solid red;					
    }
    .box2{
        width:400px;
        height:400px;
        background-color:skyblue;
        /*父块设置垂直居中*/
        display: table-cell;
        vertical-align: middle;								
    }
    .box3{
        width:100px;
        height:100px;
        background-color: gray;
        margin:0 auto;/*子块设置水平居中*/						
    }
    </style>
    </head>
    <body>
    <div class="box1">
        <div class="box2">div2<div class="box3">div3</div></div>
    <div>		
    </body>
    </html>