最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

CSS居中问题的各种解决方案(水平、垂直)

CSS rockyxia 5179浏览

写在前面

页面中CSS居中的问题我们经常能遇到,有简单的行内元素水平居中、块级元素水平居中,也有较为复杂的未知高度宽度的垂直居中问题,下面我们来把所有有关CSS居中的情况都总结一下,欢迎补充。

曾经的一篇文章:DIV未知高度垂直居中的CSS解决方法(2011-09-29)

水平居中

行内元素

把行内元素嵌套在一个DIV中,并且在DIV中设置以下样式

div {
    text-align: center;
}

块级元素

对于定宽的块级元素,我们要设置起margin-top,margin-right 为auto

div {
    margin: 0 auto;
}

多个块级元素(inline-block)

多个块级元素,我们将其display设置为inline-block;然后将父级元素设置一下属性

ul {
    text-align: center;
}
ul li {
    display: inline-block;
}

多个块级元素(flex)

设置需要水平居中的块状元素的父元素display为flex ,并且justify-content属性为center即可

ul {
    display: flex;
    justify-content: center;
}
ul li {
}

垂直居中

单行 行内元素

将行内元素的height和line-height设置为一致即可

div {
    height: 200px;
    line-height: 200px;  
}

多行 行内元素

如果行内元素文字过多产生多行,则在父级元素设置display: table-cell;vertical-align:middle;

div {
	width: 300px;
	height: 300px;
	display: table-cell;
	vertical-align: middle;
}

已知高度的块级元素

将块级元素设置绝对定位,top为50%,margin-top:-height/2

div {
    position: absolute;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    padding: 0; 
}

未知高度的块级元素

使用CSS translate,将块级元素设置绝对定位,top为50%,transform: translateY(-50%);

div{
    position: absolute;
    top: 50%;
    padding: 0;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
            transform: translateY(-50%); 
}

水平垂直居中

已知高度、宽度的元素

将块级元素设置绝对定位,top为50%,left:50%;margin-top:-height/2;margin-left:-width/2

div{
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
}

已知高度、宽度的元素(flex)

给父级使用flex布局

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

未知高度、宽度的元素

使用CSS translate

div{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
       -moz-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

小结

CSS设置居中是我们经常遇到的,本文总结了遇到的各种居中情况,并提供了一种设置方式,有的情况使用flex(兼容ie10+),有的使用了transform(兼容ie9+),欢迎补充更多情况和更多方法。

转载请注明:Rockyxia Web技术博客 » CSS居中问题的各种解决方案(水平、垂直)
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)