CSS几种常用水平垂直居中的方法

CSS几种常用居中的方法

示例代码前提：HTML部分代码如下

<div class="wrap block">
<div class="block-center">块儿居中</div>
</div>

<div class="wrap inline">
<span class="inline-center">内联居中</span>
</div>

一、绝对定位有关方法（水平垂直居中）

    方法（一）：拔河效应(*元素宽高需要设定)

.block{
position:relative;
}

.block-center{
position:absolute;
margin:auto; /*这句要写，否则无效果*/
left:0;
top:0;
right:0;
bottom:0;
}

   
方法（二）：利用margin-top和margin-left(*元素宽高需要设定)

.block-center{
position:absolute;
top:50%;
margin-top:-10px;
left:50%;
margin-left:-50px;
}

    方法（三）：利用CSS3 translate特性(但元素宽高无需设定) ，道理与第二种方法相同，注意兼容性

.block-center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

 二、放置表格方法（水平垂直居中）

      *在子元素没有设置宽高度和数量时使用

      注意：table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height。

.block{
display:table;
}
.block-center{
text-align:center;
vertical-align:middle; /*实现垂直居中*/
display:table-cell;
}

 三、内联元素居中

 
（一）垂直居中

       
方法①：父容器height与line-height相等

.inline{
text-align:center;
height:80px;
line-height:80px;
}

        方法②：给 inline 或 table-cell 元素设置vertical-align:center; (父元素要有line-heignt值)

<p style="line-height:200px">
<img src="smile.jpg" style="vertical-align:middle"/>
</p>

 （二）水平居中

      
给父容器设置 text-align:center;

注意：  ① { margin: 0 auto; } 可以让有宽度属性的块级元素水平居中。

                 但它通常只对静态元素（无浮动、无定位）起作用。

              ②
当给元素设置了float属性或absolute属性后，元素已经自动变为块级元素了。

              ③
vertical-align的百分比值是按照line-height来计算的

        

四、基于Flexbox的解决方案（水平垂直居中）

       
① 块元素和浮动元素

.block{
display: flex;
min-height:50vh;
}
.block-center{
margin:auto;
}

      ② 行内元素（只需要给最外层父元素添加即可）
.inline{
display: flex;
min-height:50vh;
align-items: center;
justify-content: center;
}

更详细的方法教学