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;
  1. 垂直居中
    inline：设置line-height或padding
    block：设置padding
非文档流元素
top: 50%; 
left: 50%; 
transform: translate(-50%)
使用 table 居中
<table>
    <tr>
        <th>
            hello, world
        </th>
    </tr>
</table>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容