CSS文档流-元素宽高的确定-居中

Normal Flow

1. inline： 从左到右排列，宽度不够时内容换行
2. block：从上到下排列，每个元素另起一行
3. inline-block：从左到右排列，按块换行

元素宽高如何确定

1. inline
   占位宽度：content、padding、margin
   占位高度：line-height、font-size
2. block
   占位宽度：父元素内容宽度
   占位高度：内部文档流中元素高度之和
3. inline-block
   综合 inline 和 block 的特性决定宽高

居中

文档流元素

1. 水平居中
   inline：text-align: center
   block：

margin-left: auto; 
margin-right: auto;

2. 垂直居中
   inline：设置line-height或padding
   block：设置padding

非文档流元素

top: 50%; 
left: 50%; 
transform: translate(-50%)

使用 table 居中

<table>
    <tr>
        <th>
            hello, world
        </th>
    </tr>
</table>