CSS元素居中方法完全指南（html中元素居中）
这里是工作狂的聚集地 | ||||
职场 | 学术 | 新媒体 | 设计 | 极客 |
专门治愈处女座强迫症。
本文为CSS入门
翻译 redman9
原载CSS-Trick
人们经常抱怨在 CSS 中居中元素的问题，其实这个问题并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。接下来，我们做一个 "决定树" 来帮我们把问题变的简单一点。首先你需要居中：
—— 水平 ——
o需要居中inline或者inline-*元素（如文字或者链接）？
o 需要居中block类的元素？
o 需要居中多个block元素？
—— 垂直 ——
o需要居中inline或者inline-*元素（如文字或者链接）？
o需要居中block类的元素？
——既水平又垂直 ——
o固定宽高
o不固定宽高
o使用flexbox
● ● ●
水平居中
水平居中inline或者inline-*元素▼
你可以轻松的在一个block元素中水平居中一个inline元素，以下代码对inline，inline-block，inline-table和inline-flex等有效。
.parent {
text-align: center;
}
水平居中block类的元素▼
在block元素被设定固定宽度的情况下，可以使用设置元素margin-left和margin-right的值为auto的方法实现水平居中。
.child {
width: 400px;
margin: 0 auto;
}
水平居中多个block类的元素▼
通过inline-block实现
.parent {
text-align: center;
}
.child {
display: inline-block;
text-align: left;
}
通过flexbox实现
.parent {
display: flex;
justify-content: center;
}● ● ●
垂直居中
垂直居中inline或者inline-*元素▼
【单行】
inline/text元素可以简单的用设置相同的上下padding值达到垂直居中的目的。
.center {
pading-top: 30px; padding-bottom: 30px;
}如果因为某种原因不能使用padding的方法，你还可以设置line-height等于height来达到目的。
.center {
height: 100px; line-height: 100px; white-space: nowrap;
}【多行】
相同的上下padding也可以适用于此种情况，如果不能生效，你可以尝试将该元素的父元素的display设置为table，同时该元素的display设置为table-sell，然后设置vertical-align。
.parent {
display: table;
width: 200px; height: 400px;
} .child {
display: table-cell;
vertical-align: middle;
}如果上述方法不能使用，你可以尝试使用flexbox,一个单独的flexbox子元素可以轻易的在其父元素中居中。谨记，这种方法需要父元素有固定的高度。
.parent {
display: flex; justify-content: center;
flex-direction: column; height: 400px;
}如果上述两种方式均不能使用，你可以使用“幽灵元素”技术，这种方法采用伪元素::before撑开高度 ，文字垂直居中。
.parent {
position: relative;
} .parent::before {
content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle;
} .child {
display: inline-block;
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; }● ● ●
既水平又垂直
【固定宽高】
.parent {
position: relative; } .child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px; }【不固定宽高】
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); }【使用flexbox】
.parent { display: flex; justify-content: center; align-items:center; }