flex垂直居中

以前我们实现水平垂直居中,可以通过如下的代码段实现

position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);

实现文本垂直居中也可以借助以下代码段实现

display: table-cell;
vertical-align: middle;

---

而使用flex可以更加简单的实现

若对flex不了解,可以看看我的博文Flex基础

这里介绍两种方式

HTML结构

<div>
   <p>
       1111111 
   </p>
</div>

方法一

CSS

div{
    display: flex;
    width: 200px;
    height: 200px;
    border: 10px solid red;
   }

p{
    margin: auto;
}

---

方法二

CSS

div{
    display: flex;
    width: 200px;
    height: 200px;
    background: red;
    justify-content: center;
    align-items: center;
}

方法二可以去掉p标签