header-bg.jpg
7 种 css 设置 div 居中的方法,完美解决各种居中问题
发表于 2017-04-28 20:43
|
分类于 CSS3
|
评论次数 0
|
阅读次数 1181

我们日常使用 css 时,经常会遇到居中问题,本文总结了一些简单易用的垂直居中、水平居中的技巧。

父级使用 text-align:center

父级使用 text-align:center,属性使所有子文本内容水平居中,这是最简单的一种水平居中方式,写法如下:

body{
    text-align:center;
}

margin 属性

利用 margin 属性,上外边距设置为 0,左右自适应,需要指定宽度,这是最普遍的一种水平居中方式,写法如下:

div{
    width:400px;
    margin:0 auto;
}

flex 弹性布局

父级 div 设置 flex 弹性布局(浏览器需要支持 H5)使所有子内容垂直水平居中,写法如下:

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

table 属性

利用 display:table 的单元格属性使其子级垂直水平居中,写法如下:

div{
    display:table;
}
.son{
    display:table-cell;
    vertical-align:middle;
}
.grandSon{
    width:50%;
    margin:0 auto;
}

结合 positiontranslate 属性

设置 position 属性分别向上和左偏移 50% 的距离,然后设置 translate 属性分别向 x 轴 和 y 轴偏移 -50%,达到垂直水平居中效果。

这种方式适合在移动端或者没有固定宽高的情况下使用,写法如下:

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

填充父级所有可用空间

设置 position 属性,上下左右均为 0(脱离文档流,并使其填充父级所有可用空间),然后给 div 设置宽高,防止其占用父级所有可用空间,最后再设置margin:auto(等同于 margin-top:0;margin-bottom:0)使浏览器重新计算外边距,以达到垂直水平居中效果,写法如下:

div{
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
    width: 400px;
    height: 300px;
    margin: auto;
}

结合 positionmargin 属性

设置 position 属性分别向上和左偏移 50% 的距离,然后再设置 margin 属性,分别向上偏移负的 div 总宽度的一半,向左偏移负的 div 总高度的一半。

这种方式适合已经设置了 div 的宽高并且需要定位垂直水平居中的情况,写法如下:

div{
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -150px;
}

发布评论
还没有评论,快来抢沙发吧!