css-三种方法实现盒子水平垂直居中

通用html代码

css代码

方案1 transform:translate设置 -50%

.wrap {
    margin:0 auto;
    background-color: yellow;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #ddd;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    line-height: 100px;
    text-align: center;
}

方案1-效果图

方案2 flex布局

.wrap {
    margin: 0 auto;
    background-color: #ddd;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
.content {
    background-color: red;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

方案2-效果图

方案3 父元素设置为：position: relative; 子元素设置为：position: absolute;
距上左50%，然后设置margin-top;margin-left的值为元素本身宽高的二分之一的负值。

.wrap {
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
    margin: 0 auto;
}
.content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;//本盒子的高度
    margin-left:-50px;//本盒子宽度的-1/2
    margin-top:-50px;//本盒子高度的-1/2
    background: #ddd;
    text-align: center;
    vertical-align: middle;
}

方案3-效果图