在進(jìn)行HTML制作頁(yè)面的過(guò)程中，總會(huì)遇到需要將元素或者文字進(jìn)行水平垂直居中的要求。下面優(yōu)尚設(shè)計(jì)就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。

行內(nèi)元素（單行文字垂直居中）

要點(diǎn)：設(shè)置 line-height = height

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

塊級(jí)元素：絕對(duì)定位

優(yōu)點(diǎn)：兼容性不錯(cuò)
缺點(diǎn)：需要提前知道尺寸

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

塊級(jí)元素：絕對(duì)定位 + transform

優(yōu)點(diǎn)：不需要提前知道尺寸
缺點(diǎn)：兼容性不好

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

塊級(jí)元素：絕對(duì)定位 + margin: auto;

優(yōu)點(diǎn)：不需要提前知道尺寸，兼容性好
缺點(diǎn)：這個(gè)方法是我最喜歡用的一個(gè)，要說(shuō)缺點(diǎn)的話，我目前還不知道。

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

塊級(jí)元素：padding

缺點(diǎn)：如果高度固定，需要提前計(jì)算尺寸（只在某些特定情況適用）

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

塊級(jí)元素：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">深圳市優(yōu)尚企業(yè)形象設(shè)計(jì)有限公司成立于2013年，十年來(lái)一直立足深圳，面向全國(guó)。為品牌和企業(yè)提供品牌網(wǎng)站建設(shè)、集團(tuán)網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站搜索引擎優(yōu)化、品牌口碑營(yíng)銷(xiāo)等服務(wù)。我們通過(guò)商業(yè)策略、技術(shù)實(shí)現(xiàn)、情感連結(jié)融入互聯(lián)網(wǎng)設(shè)計(jì)來(lái)創(chuàng)造具有活力的網(wǎng)站視覺(jué)及營(yíng)銷(xiāo)體驗(yàn)，結(jié)合線上資源來(lái)實(shí)現(xiàn)有效的價(jià)值傳播</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
}

塊級(jí)元素：display: flex

缺點(diǎn)：兼容性不好

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

塊級(jí)元素：偽元素

.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
}

塊級(jí)元素：calc()

缺點(diǎn)：兼容性太差，需要計(jì)算，并不推薦。

.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
}

塊級(jí)元素：inline-block

HTML 代碼：

<div class="parent">
  <div class="child">深圳市優(yōu)尚企業(yè)形象設(shè)計(jì)有限公司</div>
  <div class="brother">十年來(lái)一直立足深圳，面向全國(guó)</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

當(dāng)然，還有一種方法，就是使用 table 布局：因?yàn)?html 還要加 table 等標(biāo)簽，冗余有點(diǎn)多，而且結(jié)構(gòu)也改變了。

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