水平居中

是否为行内元素

.center-children {
  text-align: center;
}

是否为块级元素

.center-me {
margin: 0 auto;
}

是否有多个块级元素

垂直居中

是否为行内元素

一个

可以设置上下相等的padding来实现居中效果

.link {
padding-top: 30px;
padding-bottom: 30px;
}

当padding不能使用时，可以设置相同的heigh和inline-height来实现居中效果

.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}

多个

当上下padding不起效时，可能是由于table的原因，可以使用 vertical-align属性处理这种情况

vertical-align: middle;

也可以使用flex布局实现垂直居中

.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}

这两种方法只有在父元素有确定高度时生效

如果上述方法均不能使用，可以使用"ghost element"技术，在容器中放置一个伪元素，元素以其为基准进行对齐。

.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}

是否为块级元素

确定元素高度

网页布局中，我们常常不知道元素的具体高度，比如狂赌改变时，行数也会改变，文字样式也会改变高度。
但如果你可以确定高度，可以使用以下方法进行垂直居中。

.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

使用flex布局方便得多。

.parent {
display: flex;
flex-direction: column;
justify-content: center;
}

水平居中与垂直居中

原理与垂直居中类似

元素定宽定高

.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%);
}

使用flex

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

使用grid

body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}