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内核浏览器和各种移动设备上。

缺点：很多浏览器不兼容 。

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