CSS布局之如何使元素居中

方法一 (使得元素水平垂直都居中)

.warp{
    position: relative;
    /* background: url('img/img.jpg') no-repeat; */
    
     100%;
    height: 100vh;
}
.warp div{
    position: absolute;
     50%;
    height: 50vh;
    
    left:0px;
    right:0px;
    
    top:0px;
    bottom: 0px;
    
    margin: auto;
    background: rgba(0,0,0,0.5);
}
        
        


<div class="warp">
    <div></div>
</div>

如果.warp div中的left:0px;right:0px;没有设置,元素将会是垂直居中.

如果.warp div中的top:0px;bottom: 0px;没有设置,元素将会是水平居中.

代码如下图: