CSS 最新的垂直居中的8个方法

 CSS 最新的垂直居中的8个方法

前两天看到一个帖子，是几年前的帖子了，总结利用 CSS 来实现对象的垂直居中有6个方法，而我结合现在流行的一些方法，我总结出最新的CSS一共有8种垂直居中的方法，大家按实际需要使用对应的垂直居中的方法。

1.行内高 line-height    

html代码:

<div class="lineHeight-box">
<div class="lineHeight-content">
line-Height垂直居中
</div>
</div>

css代码:

.lineHeight-box{
width: 300px;
height: 200px;
line-height: 200px;
background-color: #FFFFCC;
}
.lineHeight-content{
text-align: center;
}

优点：适用所有浏览器

缺点： 只对文本内容垂直居中，内容较多时，不好显示。

2.浮动float                  

html代码:

<div class="float-box">
<div class="floater"></div>
<div class="float-content">
float垂直居中
</div>
</div>

css代码:

<pre name="code" class="css"><pre name="code" class="html">.float-box{
width: 300px;
height: 200px;
background-color: #99CCCC;
}
.floater{
float: left;
height: 50%;
width: 100%;
}
.float-content{
clear: both;
height: 100px;
text-align: center;
}

优点：适用所有浏览器，适用于各种盒子模型的块元素，可用于被垂直容器不确定高度时，宽度不够时，不影响排版。
缺点：存在多余、没有语义作用的空标签，这就不符合html seo的优化规范，例子中的.floater

3.绝对定位 absolute     

html代码:

<div class="absulote-box">
<div class="absulote-content">
absolute绝对定位 垂直居中
</div>
</div>

css代码:

.absulote-box{
background-color: #FF9999;
width: 300px;
height: 200px;
position: relative;
}
.absulote-content{
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}

优点：适用所有浏览器，适用于各种盒子模型的块元素，可用于被垂直容器不确定高度。
缺点：宽度不够时，排版有影响。

4.绝对定位 absolute +margin:auto

html代码:

<div class="margin-box">
<div class="margin-content">
absolute+margin垂直居中
</div>
</div>

css代码:

.margin-box{
background-color: #CC9966;
width: 300px;
height: 200px;
position: relative;
}
.margin-content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 184px;
height: 16px;
margin: auto;
}

优点：用起来方便，不费劲。
缺点：不兼容IE8以下浏览器，宽度不够时，排版有影响。

5.绝对定位 absolute +css3:

html代码:

<div class="absuloteCss3-box">
<div class="absuloteCss3-content">
absulote+Css3垂直居中
</div>
</div>

css代码:

.absuloteCss3-box{
position: relative;
width: 300px;
height: 200px;
background-color: #99CC99;
}
.absuloteCss3-content{
position: absolute;
left: 50%;
top:50%;
width: 172px;
transform: translate(-50%, -50%);
}

优点：可用于被垂直容器不确定高度。
缺点：IE低版本浏览器不兼容css3的transform元素。

6.内边距 padding

html代码:

<div class="padding-box">
<div class="padding-content">padding垂直居中</div>
</div>

css代码:

.padding-box {
background-color: #CCCC99;
width: 300px;
padding: 2% 0;
text-align: center;
}
.padding-content{
padding: 18% 0;
}

优点：更简单，更方便。
缺点：如果父容器有多个子元素需要排版的时候，其他的子元素就不好排版了。

7.table格式

html代码:

<div class="table-box">
<div class="table-content">table垂直居中</div>
</div>

css代码:

.table-box {
display: table;
background-color: #FFCCCC;
height: 200px;
width: 300px;
/*兼容IE低版本*/
/*display: inline-block;*/
}
.table-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}

优点：可用于被垂直容器不确定高度 。
缺点：IE低版本浏览器不兼容 ，嵌套很多无效标签。

8.flex盒子布局

html代码:

<div class="flex-box">
<div class="flex-content">flex垂直居中</div>
</div>

css代码:

.flex-box{
/*新版本标签*/
display: flex;
/*旧版本标签 Safari仍旧需要使用特定的浏览器前缀*/
display: -webkit-flex;
/*flex 盒子布局水平居中*/
justify-content: center;
/*flex 盒子布局垂直居中*/
align-items: center;
background-color: #99CCFF;
width: 300px;
height: 200px;
}
.flex-content{
text-align: center;
margin: 0 auto;
}

优点：排版方式比其他的更简单粗暴，适用于webkit内核浏览器和各种移动设备上。
缺点：很多浏览器不兼容 。

原创文章，保留个人观点，如果有什么建议，请与我们分享。