使元素水平和垂直居中

 

一、对行级元素水平垂直居中

　　text-align:center;

         heiht与line-height的值一样

 

二、对块级元素垂直居中对齐

（1）flex布局

.parent{
    display: flex;
    justify-content: center;
    align-items:center;
}

（2）父元素高度固定  

　　（2.1） position  子元素已知宽度 

　　　　　　父元素设置为：position: relative; 
　　　　　　子元素设置为：position: absolute; 
                     距上50%，据左50%，然后减去元素自身宽度的距离就可以实现 （子元素宽高已知）

.parent{
    position: relative;
    width: 300px;
    height: 300px;
    border: solid 1px yellow;
}
.Child1{
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -100px;
    margin-top: -50px;
    width: 200px;
    height: 100px;
    background: blue;
} 

 

　　（2.2）position transform  子元素宽高位置

.Div1{
    position: relative;
    width: 300px;
    height: 300px;
    border: solid 1px yellow;
}
.Child1{
    position: absolute;
    left: 50%;
    top:50%;
    transform:translate(-50%,-50%);
    background: blue;
    
}

 

　　（2.3）利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

.Div2{
    width: 300px;
    height: 300px;
    border: solid 1px green;
    position: relative;
}
.Child2{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: red;
}

 

（3）父元素高度不固定

 　　父元素的padding-top和padding-bottom一样

 

三、浮动元素水平垂直居中

#con{
    width: 200px;
    height: 100px;
    background: #ee2c2c;
}
#son{
    width: 50px;
    height: 50px;
    background: #008000;
    float: left;
}

<div id='con'>
    <div id='son'></div>
</div>

解决方法：

 　垂直方向居中直接在父元素设置：display: table-cell;vertical-align: middle;

   以下是水平方向居中的几种方法：

（1）水平居中需要在浮动元素外面再嵌套一层div，

#container{
    width: 200px;
    height: 100px;
    background: #ee2c2c;
    display: table-cell;     //垂直居中
    vertical-align: middle;
}
#content{
    width: 50px;
    height: 50px;
    margin: 0 auto;        //水平居中     
}
#son{
    width: 50px;
    height: 50px;
    background: #008000;
    float: left;
}
<div id='container'>
    <div id='content'>
        <div id='son'></div>
    </div>
</div>

 

（2）宽度不固定的浮动元素------通过定位和left

          同样需要在浮动元素外面再嵌套一层div

#container{
    width: 200px;
    height: 100px;
    background: #ee2c2c;
    display: table-cell;
    vertical-align: middle;
}
#content{
    float: left;
    position: relative;
    left: 50%;
}
#son{
    background: #008000;
    float: left;
    position: relative;
    left: -50%;
}