CSS display: table-cell 用于水平垂直居中
2019-01-15 本文已影响4人
安琪拉D夏亚
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>
display: table-cell
<!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>
外层div模拟为table，设置出margin
子元素table-cell自动撑满父元素table
模拟之后，其属性的使用，就可以将其视作一个标签进行使用。
reference
