css实现元素水平垂直居中的几种方式?

前言:每天玩手机,整个人都不好了.

1.绝对定位+margin:auto

优势:无需知道子盒宽高,省去计算的麻烦.
原理:子绝父相(子绝父绝也行),设置上下左右定位为0,margin:auto,子盒的margin自动计算.

 <style>
    #father {
        position: relative;
        width: 300px;
        height: 300px;
        background: pink;  
    }
    #son {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background: skyblue;
    }
</style>
<div id="father">
    <div id="son"></div>
</div>

2.绝对定位+margin反向偏移

没有优势:因为要计算,必须要知道居中元素的宽高.
原理:定位后,margin: 50%使得居中元素向右偏移父元素宽度的50%.此时居中元素的左边与父元素的中线对齐.再反向偏移自身的一半宽高即可居中.由于百分比是针对父元素的,所以偏移量只能是具体数值,讨厌计算.

    <style>
       #father {
           position: relative;
           width: 300px;
           height: 300px;
           background: pink;
       }
       #son {
           position: absolute;
           width: 100px;
           height: 100px;
           background: skyblue;
           margin: 50%;
           left: -50px;
           top: -50px;
       }
    </style>
        <div id="father">
        <div id="son"></div>
    </div>

3.绝对定位+translate偏移

优势:和1一样不用计算
劣势:IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.
原理:同2一样,只是translate的百分比是相对自身的,所以不用计算.

    <style>
       #father {
           position: relative;
           width: 300px;
           height: 300px;
           background: pink;
       }
       #son {
           position: absolute;
           width: 100px;
           height: 100px;
           background: skyblue;
           margin: 50%;
           -webkit-transform: translate(-50%, -50%);
           /* 各家浏览器内核对css3属性的支持情况不同,webkit是谷歌的 */
           -moz-transform: translate(-50%, -50%);
           /* moz是火狐的 */
           transform: translate(-50%, -50%);
       }
    </style>
        <div id="father">
        <div id="son"></div>
    </div>

4.inline-block + text-align + table-cell + vertical-align(单元格方式)

        #father {
            width: 300px;
            height: 300px;
            display:table-cell;
            /* These elements behave like <td> HTML elements.
            td就是table-cell,tr是table-row元素,
            不是行内(inline)或行内块元素(inline-block),
            td拥有自己的属性 */
            text-align: center;
            /* text-align 可以任何元素上使用,也包括行内块元素
            但只有子元素为图片,行内元素、行内块元素或内部为文字
            元素内部才会水平居中*/
            vertical-align: middle;
            /* vertical-align 只能用来指定行内块元素（inline-block）
            或表格单元格（table-cell）元素的内的垂直对齐方式,对块元素不生效 */
            background: pink;
        }
        #son {
            display: inline-block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            /* 为了使文字也对齐 */
            background: skyblue;
        }
   <div id="father">
        <div id="son">Demo</div>
    </div>

5.flex+justify-content+align-items(弹性模型)

注:
1flex布局在pc端有很大的兼容问题,一般用于移动端,另说比起什么浮动,定位,真是方便太多.
2.设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效.

        #father {
            display: flex;
            width: 400px;
            height: 400px;
            background: pink;
            justify-content: center;
            /* 使得子元素在父元素的主轴方向(默认为水平方向)居中 */
            align-items: center;
            /* 使得子元素在父元素的侧轴方向(默认为垂直方向)居中 */
        }
        #son {
            width: 100px;
            height: 100px;
            background: skyblue;
        }

    <div id="father">
        <div id="son"></div>
    </div>