CSS display: table-cell 用于水平垂直居中

在 CSS 设置居中时候，水平和垂直居中的设置略有不同，通常我们使用 text-align:center 对图片、文字等行内元素（inline / inline-block）进行水平居中，并使用 line-height 对单行文字设置垂直居中（仅适用于单行文字）。
但是，如果使用表格，则可以通过 td（单元格元素）的 align=“center” 及 valign=“middle” 属性设置单元格内容的水平和垂直居中。
而对于那些不是表格的元素，可以通过 display: table-cell 将其模拟成一个表格单元格 td，这样就可以通过 CSS 的vertical-align: middle; /* 垂直居中*/ 和 text-align: center; /* 水平居中*/ 属性进行设置。

用于实现表格模拟的 display 值及其作用

display 值	模拟	对应标签
table	块元素级的表格	`<table>`
inline-table	内联元素级的表格	`<table>`
table-caption	表格标题	`<caption>`
table-cell	表格单元格	`<td>`
table-row	表格行	`<tr>`
table-row-group	表格行组	`<tbody>`
table-column	表格列	`<col>`
table-column-group	表格列组	`<colgroup>`
table-header-group	表格标题组	`<thead>`
table-footer-group	表格脚注组	`<tfoot>`

display: table-cell 实现水平垂直居中

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8" /> 		<title></title> 		<style> 			.container{ 				width: 100px; 				height:50px; 				border: 1px solid black; 				display: table-cell;	/* 模拟为td单元格，同时形成了 BFC */                 /*display: table-caption  如果设置为此项 则不能使用水平和垂直居中*/  				vertical-align: middle; /* 垂直居中*/ 				text-align: center;		/* 水平居中*/                 margin:50px; 	 /* table-cell 对 margin 不感知，此处设置无效*/ 			} 		</style> 	</head> 	<body> 		<div class="container"> 			a 		</div> 		<div class="container"> 			b 		</div> 		<div class="container"> 			c 		</div> 	</body> </html>

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8" /> 		<title></title> 		<style> 			.con{ 				background: red; 				display: table; /* 将父元素div模拟为块级表格 table*/ 				margin: 50px;   /* 设置父元素 table 的margin*/ 			} 			.container{ 				width: 200px; 				height:50px; 				border: 1px solid black; 				display: table-cell;	 	 				vertical-align: middle;  				text-align: center;		 				/*margin: 50px;*/  去掉设置无效的 margin 			} 		</style> 	</head> 	<body> 		<div class="con"> 			<div class="container"> 			a 			</div> 			<div class="container"> 				b 			</div> 			<div class="container"> 				c 			</div> 		</div> 		 	</body> </html>