CSS 居中对齐

 

<div class="container">
    <div class="content"></div>
<div>


// flex，在容器元素上设置
.container{
    height: 300px;// 
    display: flex;
    justify-content: center;
    align-items: center; 
}


// absolute, 已知内容宽高，在内容元素上设置, 遮盖父元素
.content{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100px;
    width: 200px;
}



// 负margin， 已知内容宽高，先将左上点定位在父元素中心，在根据内容元素高宽，设置一半的上负边距和左负编辑。
.content{
    position: relative;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 200px;
    margin: -50px 0 0 -100px;

}


// transform, 已知内容宽高，先将左上点定位在父元素中心，在根据内容元素高宽，向左上方偏移
.content{
    position: relative;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 200px;
    transform: translate(-50%, -50%);

}