手把手教你CSS水平、垂直居中的10种方式(小结)

面试必备，工作一定会用到。emmm大家都懂的，话不多说，先直接贴一个总结和效果图。

总结

PC端有兼容性要求，子元素宽高固定，推荐absolute + 负margin
PC端有兼容要求，子元素宽高不固定，推荐absolute + transform
PC端无兼容性要求，推荐flex
移动端推荐使用flex

要怎么实现上面这幅图的效果呢，下面为大家总结了10中常用的方法。首先我先创建一个公共的模板样式

<template>
<div class="two">
<div class="parent">
<div class="child">123</div>
</div>
</div>
</template>
<style lang="less" scoped>
.parent{
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px solid red;
box-sizing: border-box;
.child {
height: 100px;
width: 100px;
background: #2f8df0;
}
}
</style>

然后具体用到的样式单独写在方法里面，首先先介绍4个平时布局的技巧。

1.水平居中div里面的div，设置子元素的宽度。

.parent{
width:300px;
margin:0 auto;
}

注意：如果子元素设置了

display:table-cell

margin:0 auto;

2.设置文字垂直居中，设置包含文字div的高。

.child{
text-align：center
line-height:100px //知道子元素的高,设置和高一样的高度
}

3.两个或者多个块级元素垂直居中对齐，父元素设置height和line-height相等。

.parent{
line-height: 300px; //知道父元素的高,设置和高一样的高度
}
.child1{
display: inline-block;
vertical-align: middle;
line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。
}
.child2{
display: inline-block;
vertical-align: middle;
line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。
}

4.让一个元素充满当前整个容器，设置absolute

.parent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

OK，介绍完毕，下面开始介绍CSS实现水平垂直居中的方式。

1.不需要设置子元素的宽高，需要设置父元素的高度。使用 absolute + transform （推荐）

.parent{
position: relative								 
 1/3    1 2 3 下一页 尾页