水平居中
是否为行内元素
.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;
}