CSS 的居中问题是一个经常被抱怨的东西。为啥居个中要这么麻烦？我觉得可能问题不在于难，而在于每次一查，有各种各样的解决方案，你选了一个，能正常地居中了，但是心里又会在想：选这个是不是最好的呢？会不会有什么问题？
各种犹豫不决？那就来创建一个决策树吧！
水平居中
是inline元素或者inline-*元素吗？（比如text或者links）？
给inline元素一个block的父元素，然后设置父元素css为text-align:center 即可搞定。
.center-children {
text-align: center;
}
是block块元素吗？
把一个块级元素的margin-left和margin-right设置成auto,再给定一个固定的width，即可水平居中。一般我们会写成：margin:0 auto;
.center-me {
margin: 0 auto;
}
有多个block块级元素的话，怎么居中？
如果你想在一行里让多个块级元素居中，你可以把这些块级元素的display设置成inline-block(同时注意设置这些元素的父级元素text-align:center)，或者使用flexbox.
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
如果使用flexbox,直接对父元素做如下设置即可：
.flex-center {
display: flex;
justify-content: center;
}
垂直居中
是inline元素或者inline-元素吗？（比如text或者links）？
单行？
1.设置相同的padding-top和padding-bottom.
2.如果1不能使用，可以尝试将元素的line-height和height设置成相等的值。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
多行？
设置相同的padding-top和padding-bottom.
如果1不能使用，也许text所在的元素是一个table cell,可以使用 vertical-align来处理。也可以使用flexbox.
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
是block块元素吗？
知道元素的高度。 如果你知道元素的高度，那么像下面这样就可以：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; / account for padding and border if not using box-sizing: border-box; */
}
不知道元素的高度。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
你可以使用flexbox吗？
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
水平垂直居中
一般结合上面两个技巧就可以做到水平和垂直居中。不过也可以分成下面这三个阵营：
元素有固定的宽度和高度(设置absolute，50%，50%的值配合使用负的长度和宽度值可以很好地得到跨浏览器的支持)
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
元素没有固定的宽度和高度(在top和left上同时使用transform属性和负的translate百分数，注意这里的百分数是基于当前元素的)
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
可以使用flexbox吗？注意两个方向上都要设置center
.parent {
display: flex;
justify-content: center;
align-items: center;
}
网友评论