前端常见面试题：实现元素水平垂直居中

分成 块级元素 和 行内元素 进行总结

块级元素

flex布局：

    具体的做法就是把父元素的属性： jusity-content(主轴对齐方式) 和 align-items(交叉轴单行对齐)  的值设置为 center

效果图：

块级元素Flex布局

Css代码：

---

#warp{

    width:100%;

    height:400px;

    background-color:antiquewhite;

    display:flex;

    /* 主轴的对齐方式 */

    justify-content:center;

    /* 交叉轴上的单行对齐 */

    align-items:center;

}

.center{

    width:160px;

    height:220px;

    background-color:azure;

    text-align:center;

 }

.centerspan{

    line-height:220px;

}

---

Html代码：

---

    

        实现水平垂直居中

    

---

绝对定位（position: absolute）+ 负margin（这种方式需要知道元素的宽高）：

效果图：

绝对定位+margin

Css代码：

---

.center{

    width:400px;

    height:200px;

    background-color:beige;

    position:absolute;

    top:50%;

    left:50%;

    margin-top:-100px;

    margin-left:-200px;

    text-align:center;

 }

.centerspan{

    line-height:200px;

 }

---

Html代码：

---

    水平垂直居中