CSS水平和垂直居中在开发中经常用到,在此加以总结。
水平居中方法
1.行内元素水平居中,设置父元素的text-align: center。
center
#box {
text-align: center;
}
常用的行内元素有a、abbr、b、br、em、input、label、select、span、strong、sub、sup、textarea等。
2.宽度固定的块级元素水平居中,设置该元素的margin: 0 auto。
#box {
width: 64%;
margin: 0 auto;
}
常用的块级元素有address、article、audio、blockquote、canvas、div、footer、form、h1、header、hr、ol、output、p、pre、section、table、ul、video等。
3.绝对定位元素水平居中,设置父元素position: relative,设置该元素left: 0; right: 0; margin: 0 auto;。
#box {
position: relative;
}
#content {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
4.flex布局水平居中,设置父元素display: flex; justify-content: center。
#box {
display: flex;
justify-content: center;
}
垂直居中方法
1.单行文本垂直居中,设置该元素line-height为父元素height高度。
#content {
height: 2em;
line-height: 2em;
}
2.将父元素显示为表格display: table-cell,利用vertical-align: middle设置垂直居中。
#box {
display: table-cell;
vertical-align: middle;
}
3.绝对定位该元素并设置父元素positoin: relative,设置该元素top:0; bottom: 0; margin: auto;
#box {
position: relative;
}
#content {
position: absolute;
top: 0;
bottom: 0;
marigin: auto;
}
4.绝对定位固定高度是,设置top: 50%,margin-top值为高度值的一半。
#box {
position: relative;
}
#content {
position: absolute;
height: 12em;
top: 50%;
margin-top: 6em;
}
5.flex布局,设置父元素display: flex; align-items: center
#box {
display: flex;
align-items: center;
}