CSS垂直水平居中的方式总结

本文主要是介绍CSS垂直水平居中的方式总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

水平垂直居中分居中元素定宽高与不定宽高两种情况。

假如有公共代码：

.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.box {
    background: green;    
}
//size仅定宽需要 
.box.size{
    width: 100px;
    height: 100px;
}

<div class="wp">
    <div class="box size">123123</div>
</div>

一、定宽高

• absolute + 负margin
• absolute + margin auto
• absolute + calc

1.absolute + 负margin

.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.box {
    background: green;    
}
.box.size{
    width: 100px;
    height: 100px;
}

2.absolute + margin auto

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

3.bsolute + calc

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

二、不定宽高

• absolute + transform
• lineheight
• css-table
• flex
• grid

1.absolute + transform

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

2.lineheight

.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

3.css-table

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

4.flex

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

5.grid

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

总结：

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin
• PC端有兼容要求，宽高不固定，推荐css-table
• PC端无兼容性要求，推荐flex
• 移动端推荐使用flex

参考：https://segmentfault.com/a/1190000016389031

这篇关于CSS垂直水平居中的方式总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！