web前端学习（十一）水平垂直居中

水平垂直居中的方法

 
        1.通过外边距调整margin移动，根据父子元素的宽高来计算外边距的值。(cale为计算属性)

         可以使用cale属性：
            margin-left:cale(50% - 1/2width)   ——父元素宽的一半减自身宽一半
            margin-top:cale(50% -1/2height)

   2.定位

          2.1定位:

            position:absolute
            top:50%,left:50%
            margin-left:-1/2width
            margin-top:-1/2heigh

           2.2定位:

            position:absolute

            left、top、bottom、right为0，margin：auto

         2.3定位:

            position:absolute

            top:50%,left:50%

            transform: translate(-50%,-50%)

     3.flex布局

            display:flex
            justify-content:center  水平
            align-items:center   垂直

     4.其他           

          文本水平居中：text-align:center

          文本垂直居中：line-height:(等于设置的height)
          水平方向居中：margin:0 auto;

display:table-cell     (让标签元素以表格单元格的形式呈现)

父元素内的所有行内元素水平垂直居中：

vertical-align: middle;  (垂直)

text-align: center;  （水平）

使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。这在子元素不确定宽高和数量时，特别实用！

如果不想设置display改变布局，子元素是块级元素：

vertical-align: middle;  (垂直)

margin:auto （水平）