div 水平垂直居中 两种方法 CSS

1、第一种 方法

        需要给定 div的 定长 定宽

        设置div的宽度为400px，高度为200px

        给 div 设置css属性

        width:400px

        hight:200px

        position: absolute;

        top: 50%;

        left: 50%;

        margin: -100px 0 0 -200px;     //这里是 长宽的 一半   的负值

1、第二种 方法 

需要对 弹性布局有 学习

上代码;  定义两个div

<div class="A">
    <div class="B"></div>
</div>

 CSS   ：给父元素 设置为 弹性布局 

.A{
        width: 200px;
        height: 200px;
        background-color: darkkhaki;
        display: flex;
        /* 水平放向居中 */
        justify-content:center;
        /* 垂直方向 */
        align-items:center

    }
.B{
        width: 50px;
        height: 50px;
        background-color: cyan;
    }

看效果：配色就忽略吧