Normal Flow
- inline: 从左到右排列,宽度不够时内容换行
- block:从上到下排列,每个元素另起一行
- inline-block:从左到右排列,按块换行
元素宽高如何确定
- inline
占位宽度:content、padding、margin
占位高度:line-height、font-size - block
占位宽度:父元素内容宽度
占位高度:内部文档流中元素高度之和 - inline-block
综合 inline 和 block 的特性决定宽高
居中
文档流元素
- 水平居中
inline:text-align: center
block:
margin-left: auto;
margin-right: auto;
- 垂直居中
inline:设置line-height
或padding
block:设置padding
非文档流元素
top: 50%;
left: 50%;
transform: translate(-50%)
使用 table 居中
<table>
<tr>
<th>
hello, world
</th>
</tr>
</table>