前端开发——容器布局垂直居中

本案例记录的是前端中容器居中的案例

margin:0 auto  已经可以实现子元素水平居中于父容器中。

方式1:定位子绝父相

    <div style="height: 100px;width:200px;background: lime;position: relative">
        <div id="center_method_one">
            <p>子布局</p>
        </div>
    </div>

css样式,设置子布局绝对定位,距离左上父亲布局的一半,然后向左上移动自身的一半即可

        #center_method_one{
            background-color: red;
            position: absolute;
            margin: auto;
            width: 70px;
            top:50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

 方式2:使用flex

        .father{
            margin-top: 60px;
            background-color: lime;
            width: 100px;