水平居中

水平居中比较简单，这里只简单概述一下：

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

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

垂直居中

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

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

2.1. line-height法

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

示例：

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

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

2.2. 绝对居中法

所谓绝对居中就是：

.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+，兼容性良好.
• 代码量少，标签结构简单.

缺点：

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

2.3. 负外边距法

将设置了绝对定位的子元素水平和垂直偏移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值来确定.

2.4. 负位移法（推荐）

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

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

优点：

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

缺点：

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

2.5. 表格法

通过设置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。

优点：

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

缺点：

• 需要额外标签。

2.6. 行内块法

通过增加一个空白元素（如伪元素），并将其高度设置为百分百，然后同时将空白元素和要居中的元素设置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+支持.

缺点：

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

2.7. flex

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

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

优点：

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

缺点：

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

原文：https://www.cnblogs.com/ruoyaozhan/p/10872485.html