css 通过绝对定位实现水平垂直居中

知识点： margin: auto;

效果图：

代码： 

   html:

<div class="outer">
    <div class="inner"></div>
</div>

  css:

.outer {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: rgba(0,0,0,.6);
}
.inner {
    width: 50%;
    height: 400px;
    background: red;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    margin: auto;
}