经典老问题,CSS水平垂直居中的若干实现方式
本文由 小茗同学 发表于 2016-11-26 浏览(1970)
最后修改 2018-05-07 标签:css 水平 垂直 居中
[TOC]

水平居中

水平居中比较简单,这里只简单概述一下:

  • 对于行内元素来说(span、img、input等),直接text-align:center;即可搞定;
  • 对于块级元素,使用margin: 0 auto;也可以搞定;

还有其它一些方法,比如借助绝对定位等,不过更麻烦也不太推荐,所以不讲。

垂直居中

垂直居中主要有8种方法,本文只介绍7种,还有一种个人觉得不伦不类,懒得写了。

完整DEMO演示地址:http://demo.liuxianan.com/2016/11/26-vertical-align-center/

line-height法

通过设置line-height和height相同来达到文本元素垂直居中的效果。

示例:

.test {
	height: 200px;
	height: 200px;
}

优点:简洁,简单,好记,兼容性好;
缺点:只对文本元素生效,而且文本不能超过单行。

绝对居中法

所谓绝对居中就是:

.parent {
	position: relative;
	width: 400px;
	height: 400px;
}
.children {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100px;
	height: 100px;
}

优点:

  • 支持IE8+,兼容性良好.
  • 代码量少,标签结构简单.

缺点:

  • 高度必须定义;
  • 使用了绝对定位;

负外边距法

将设置了绝对定位的子元素水平和垂直偏移50%;然后,在水平和垂直方向分别偏移负自身宽高的一半。

.parent{position:relative}
.children{position: absolute; left: 50%; top: 50%;}
.content{width: 100%; height: 150px;margin-left: -50%; margin-top: -75px;}

优点:

  • 兼容性好,IE6+,移动端更不用说

不足:

  • 子元素的宽高值需要确定,这对于高度自适应容器是个问题.
  • 最好将盒子设置box-sizing:border-box,因为偏移值是依据content+padding值来确定.

负位移法(推荐)

将设置了绝对定位的子元素水平和垂直偏移50%;然后,通过CSS3 transform属性值将子元素偏移负自身宽高的一半。

.parent{position:relative}
.children{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}

优点:

  • 支持子容器高度自适应,无需显示设置宽高度;
  • 代码量少.

缺点:

  • 兼容性为IE8+,不过移动端兼容良好;
  • 需要添加浏览器私有前缀.

表格法

通过设置display:table/table-cell相关属性,模拟表格布局。注意,将元素设置为display:table-cell;后并不是说这个元素就可以垂直居中了,而是它的子元素相对于它垂直居中,所以使用table-cell方式垂直居中的话还需要一个额外的标签。

<style type="text/css">
.parent {
	display:table;
	width: 700px;
	height: 400px;
	background: #3BB7FF;
	*position: relative; /*IE hake*/
}
.children {
	display:table-cell;
	vertical-align:middle;
	*position: absolute;
	*top:50%; /*IE hake*/
}
.content {
	width:300px;
	margin:0 auto;
	background: #00FD2A;
	*position: relative;
	*top:-50%; /*IE hake*/
}
</style>
<div class="parent">
	<div class="children">
		<div class="content">
			表格法兼容性好,支持IE6+,支持动态高度,表格法兼容性好,支持IE6+,支持动态高度,表格法兼容性好,支持IE6+,支持动态高度,表格法兼容性好,支持IE6+,支持动态高度表格法兼容性好,支持IE6+,支持动态高度。
		</div>
	</div>
</div>

注意.children不要设置了height:100%;,否则不兼容IE7。

优点:

  • 支持高度自适应,可适用于响应式环境.
  • 适用于多个子元素水平垂直居中环境.
  • 兼容性良好

缺点:

  • 需要额外标签。

行内块法

通过增加一个空白元素(如伪元素),并将其高度设置为百分百,然后同时将空白元素和要居中的元素设置vertical-align: middle;即可实现垂直居中。

.parent{}
.parent:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0}
.children{display:inline-block;vertical-align:middle}

优点:

  • 支持子元素高度自适应.
  • 适用于多个子元素水平垂直居中环境.
  • 兼容性良好,IE7+支持.

缺点:

  • 说不上来,但是个人不太喜欢这种方式;

flex

使用CSS3新添加的flexbox弹性布局可以非常容易的实现各种居中,如一个、多个子元素的水平/垂直居中、对齐、等高;

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

优点:

  • 不需要设置子元素的高度、宽度.
  • 适用于任意子元素水平垂直居中环境.
  • 代码量少.

缺点:

  • IE10+才兼容,移动端虽然都支持但是也存在部分兼容问题.
  • 需要添加浏览器私有前缀.

参考