水平和垂直居中-白红宇

水平和垂直居中

阅读量：5342 次

发布时间：2019-06-15

本文共 854 字，大约阅读时间需要 2 分钟。

水平居中

行内元素：给父元素添加 text-align: center;(文本 / 图片)

块级元素：

　　确定宽度：margin: 0 auto;

　　不确定宽度： 1. 把块级元素变成行内元素, display:inline-block; text-align:center;

　　　　　　　　 2. 给父元素设置浮动和相对定位及left: 50%; 子元素相对定位及left: 50%;

　　　　　　　　 3. table{margin: 0 auto;}

垂直居中

父级高度确定

　　单行文本：line-height: height;

　　多行文本、图片: 1. vertical-align:middle; (只有父级元素为td/th,或者图片) <IE8+>

　　　　　　　　　　2. father{display:table;} child{display:table-cell;vertical-align:middle} 用table-cell 来激活 vertical-align;eg：多行文字的水平垂直居中

多行文字的水平垂直居中

　　
     
              这里的文字用来做多行文字垂直居中对齐的测试。
      
        这是第二行文字，您还可以再添加一行文字做测试！
      
        这是第3行文字，您还可以再添加一行文字做测试！
      
        这是第4行文字，您还可以再添加一行文字做测试！