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>
网友评论