水平居中
-
width:xxx + margin:0 auto
-
display:table + margin:0 auto table在表现上类似block，但宽度为内容宽。
-
absolute + left:50% + transform/负margin(子固定宽度)
- 父元素
flex + justify-content:center
- 父元素
flex + 子元素 margin:0 auto
-
inline 、inline-block、inline-table 、inline-flex + text-align:center
- 子元素
absolute + left:0 + right:0 + margin:0 auto
垂直居中
- 子元素仅有一个且设置
display:inline-block;vertical-align:center;line-height:同父元素height
- 单行行内元素 父元素
height + 子元素line-height
- 多行行内元素
- 父元素
flex-direction:column + justify-content: center
- 父元素
flex + align-items:center;
- 父元素
table + 子元素 table-cell + vertical-align: middle
-
absolute + top:50% + transform/负margin(子固定高度)
- 父元素
table + 子元素 table-cell + vertical-align: middle
vertical-align只对拥有valign特性的元素(即表格元素)才生效，结合display: table 使得div模拟table属性。
<style>
#outer{
width: 400px;
height: 200px;
margin: 50px auto;
border: 1px solid red;
display: table;
}
#middle{
display:table-cell;
vertical-align:middle;
width:100%;
}
</style>
<div id="outer">
<div id="middle">
这是固定高度多行文本垂直居中，
这是固定高度多行文本垂直居中。
</div>
</div>
