垂直居中的几种常用方式

转自知乎回答https://www.zhihu.com/question/20543196/answer/89218605

水平居中方案

行内元素

text-align:center

定宽块状元素

margin-left:auto;
margin-right:auto;

不定宽块状元素

在元素外加入table标签（包括table、tbody、tr、td都要写），该元素写在td内，然后设置margin的值为auto

给该元素设置display: inline

父元素设置position:relativeh和left：50%，子元素设置position:relative和left：50%

垂直居中方案

父元素高度确定的单行文本

设置style属性height=line-height即

height:20px;
line-height:20px;

父元素高度确定的多行文本

• 插入 table （插入方法和水平居中一样），然后设置 vertical-align: middle
• 先设置 display:table-cell 再设置 vertical-align:middle

div水平垂直居中

前端面试中几乎必问的一个知识点，总结了一下大概有这么几个方案

1.使用position: absolute,同时设置left、top、margin-left、margin-top的属性这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。

.one{
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
    background:red;
}

2.使用position: fixed,同样设置left、top、margin-left、margin-top的属性, 大家都知道的position: fixed, IE是不支持这个属性的

.two{ 
    position:fixed; 
    width:180px; 
    height:180px; 
    top:50%; 
    left:50%; 
    margin-top:-90px; 
    margin-left:-90px; 
    background:orange;
}

3. 利用position:fixed属性，margin:auto这个必须不要忘记了

.three{ 
    position:fixed; 
    width:160px; 
    height:160px; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    margin:auto; 
    background:pink;
}

4.利用position:absolute属性，设置top/bottom/right/left

.four{ 
    position:absolute;
    width:140px; 
    height:140px; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0;
    margin:auto; 
    background:black;
}

5.利用display:table-cell属性使内容垂直居中

.five{ 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    width:120px; 
    height:120px; 
    background:purple;
}

6.最简单的一种使行内元素居中的方法，使用line-height属性，这种方法也很实用，比如使文字垂直居中对齐

.six{ 
    width:100px; 
    height:100px; 
    line-height:100px; 
    text-align:center; 
    background:gray; 
}

7.使用css3的display: -webkit -box属性，再设置 -webkit -box-pack:center/-webkit -box-align :center

.seven{ 
    width:90px; 
    height:90px; 
    display:-webkit-box; 
    -webkit-box-pack:center; 
    -webkit-box-align:center; background:yellow; 
    color:black;
}

8.使用css3的新属性transform: translate(x,y)属性;

不理解的可以参看 从一个居中方法说起 —— 谈 translate 与 相对、绝对定位

这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好

.eight{ 
    position:absolute; 
    width:80px; 
    height:80px; 
    top:50%; 
    left:50%; transform:translate(-50%,-50%); 
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%); 
    -ms-transform:translate(-50%,-50%);
    background:green;
}

9.最高大上的一种，使用:before元素

.nine{
    position:fixed;
    display:block;
    top:0;
    right:0;
    bottom:0;
    left:0;
    text-align:center;
    background:rgba(0,0,0,.5);
}
.nine:before{
    content:'';
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.nine .content{
    display:inline-block;
    vertical-align:middle;
    width:60px;
    height:60px;
    line-height:60px;
    color:red;
    background:yellow;
}            

作者：徐尤熙
链接：https://www.zhihu.com/question/20543196/answer/89218605
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。