CSS3技巧36：让内容垂直居中的三种方式

让内容垂直居中，是一个很重要的应用情景，在很多场合都会需要。这也是面试的时候，一些考官喜欢拿来初面的小题目。

这里，小结下让内容垂直居中的三种方式。

当然，读者如果有更好的方法，也可以提出来。

基本HTML：

<div class="big">
    <div class="small"></div>
</div>

基本CSS：

.big{
    width: 600px;
    height: 400px;
    background: #eee;
}
.small{
    width: 200px;
    height: 150px;
    background: #f00;
}

一、使用flex

.big{
   display: flex;
   justify-content: center;
   align-items: center;
}

二、使用grid

.big{
    display: grid;
    place-items:center;
}

.big{
    display: grid;
}
.small{
    place-self: center;
}

三、使用position

.big{
    position: relative;
}
.small{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}