常用的css垂直居中方案

在进行HTML制作页面的过程中，总会遇到需要将元素或者文字进行水平垂直居中的要求。下面优尚设计就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。

行内元素（单行文字垂直居中）

要点：设置 line-height = height

.test {
	height: 200px;
	border: 1px solid red;
	line-height: 200px
}

块级元素：绝对定位

优点：兼容性不错
缺点：需要提前知道尺寸

.parent {
	position: relative;
	height: 200px
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -40px;
	width: 80px;
	height: 40px;
	background: #00f
}

块级元素：绝对定位 + transform

优点：不需要提前知道尺寸
缺点：兼容性不好

.parent {
	position: relative;
	height: 200px
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 40px;
	background: #00f;
	transform: translate(-50%,-50%)
}

块级元素：绝对定位 + margin: auto;

优点：不需要提前知道尺寸，兼容性好
缺点：这个方法是我最喜欢用的一个，要说缺点的话，我目前还不知道。

.parent {
	position: relative;
	height: 200px
}
.child {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 80px;
	height: 40px;
	background: #00f
}

块级元素：padding

缺点：如果高度固定，需要提前计算尺寸（只在某些特定情况适用）

.parent {
	padding: 5% 0
}
.child {
	padding: 10% 0;
	background: #00f
}

块级元素：display: table-cell

.parent {
	display: table;
	width: 600px;
	height: 200px;
	border: 1px solid red
}
.child {
	display: table-cell;
	vertical-align: middle
}

或者：

.parent {
	display: table-cell;
	height: 300px;
	border: 1px solid red;
	vertical-align: middle
}

同样适用于多行文字的垂直居中处理

HTML代码：

<div class="parent">
  <span class="child">深圳市优尚企业形象设计有限公司成立于2013年，十年来一直立足深圳，面向全国。为品牌和企业提供品牌网站建设、集团网站建设、营销型网站建设、小程序开发、微信公众号开发、网站搜索引擎优化、品牌口碑营销等服务。我们通过商业策略、技术实现、情感连结融入互联网设计来创造具有活力的网站视觉及营销体验，结合线上资源来实现有效的价值传播</span>
</div>

CSS代码：

.parent {
	display: table-cell;
	width: 400px;
	height: 300px;
	border: 1px solid red;
	vertical-align: middle
}
.child {
	display: inline-block;
	background: #00f;
	vertical-align: middle
}

块级元素：display: flex

缺点：兼容性不好

.parent {
	display: flex;
	width: 600px;
	height: 200px;
	border: 1px solid red;
	align-items: center;
	justify-content: center
}
.child {
	background: #00f
}

块级元素：伪元素

.parent {
	width: 300px;
	height: 300px;
	border: 1px solid red;
	text-align: center
}
.child {
	display: inline-block;
	width: 100px;
	height: 40px;
	background: #00f;
	vertical-align: middle
}
.parent::before {
	display: inline-block;
	height: 100%;
	content: ''
	vertical-align: middle
}

块级元素：calc()

缺点：兼容性太差，需要计算，并不推荐。

.parent {
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid red
}
.child {
	padding: -webkit-calc((100% - 100px)/ 2);
	padding: -moz-calc((100% - 100px)/ 2);
	padding: -ms-calc((100% - 100px)/ 2);
	padding: calc((100% - 100px)/ 2);
	width: 100px;
	height: 100px;
	background: #00f;
	background-clip: content-box
}

块级元素：inline-block

HTML 代码：

<div class="parent">
  <div class="child">深圳市优尚企业形象设计有限公司</div>
  <div class="brother">十年来一直立足深圳，面向全国</div>
</div>

CSS 代码：

.parent {
	position: relative;
	width: 400px;
	height: 400px;
	border: 1px solid red
}
.brother,.child {
	display: inline-block;
	vertical-align: middle
}
.child {
	background: #00f;
	font-size: 12px
}
.brother {
	height: 400px;
	font-size: 0
}

表格元素：table

当然，还有一种方法，就是使用 table 布局：因为 html 还要加 table 等标签，冗余有点多，而且结构也改变了。

<table>
  <tr>
    <td align="center" valign="middle">content</td>
  </tr>
</table>