CSS实现元素水平垂直居中

1,751 阅读4分钟

水平垂直居中是页面布局中及其常见的样式,关于实现方式也是多种多样,闲话少说,我们直接进去正题。

首先做一下基础布局:

<div class="outer">
    <div class="inner"></div>
</div>

这里我们给出了两个div,然后我们来给这两个div写一下初始样式:

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
}

现在我们能看到这两个div是这样显示的:


好了,前戏到此为止,下面是重头戏了。

方法一:采用绝对定位,计算定位距离

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:50px;   /*(父元素高度-子元素高度)/2*/
    left:50px;  /*(父元素宽度-子元素宽度)/2*/
}

哦啦,就是如此的简单,我们来看看效果:


这种方法要根据父子元素的宽高来计算top和left的值,如果页面布局复杂起来,每一个都这样计算岂不是要烦死我这样的数学白痴?个人觉得这种方法有点太粗暴了。

方法二:采用绝对定位,巧妙使用margin:auto

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:0px;
    bottom: 0px;
    left:0px;
    right:0px;
    margin:auto;
}

好啦,来看效果


也可以实现,完全no problem! 只需要父元素相对定位,子元素绝对定位,然后设置top,bottom,left,right都为0,再设置margin:auto(这时浏览器会给margin-left,margin-right相同的值,margin-top,margin-bottom相同的值,使元素块在父元素中水平垂直居中)即可。

注意:利用margin:auto方法支持跨浏览器,支持百分比,但是必须声明子元素的width或height(至少一项,不然会占据父元素所有空间)。

方法三:采用绝对定位,利用负边距

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:50%;
    left: 50%;
    margin-top:-50px;  /* 子元素高度的一半 */
    margin-left:-50px; /* 子元素宽度的一半 */
}

看,居中了:


这种方法也很容易理解的,来我们简单说一哈,当我们设置了left和top各为50%时,子元素左边界距父元素左边界50%,上边界距父元素上边界50%,其实此时,我们可以知道,子元素的左上角这个点,是水平垂直居中的,当我们设了负边距时,我们可以理解为这个子元素向右向上各移了自身长度的一半,这就达到了水平垂直居中。

注意:利用负边距方法优点是具有良好的跨浏览器特性,兼容IE6/IE7,但是缺点是不能自适应,需设置子元素的宽高,不支持百分比,且负边距值与padding和是否定义box-sizing: border-box有关,计算需要根据不同情况。

方法四:transform用起来

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:relative;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

来,直接上图:


这种方法和上一种方法的原理差不多,只是把上面的margin换成了transform,这种处理方式的好处在于我们不需要知道子元素的宽高,直接用-50%就完事儿了。

注意:利用transform方法的好处是代码量少,且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开,优雅地溢出。但transform IE8不支持。

方法五:flex布局

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    
}

看效果:


Flex布局即为弹性布局,只需将父元素设置三个属性即可(display,justify-content,align-items)。

注意:利用flex方法代码量少,不用设置子元素的width与height,内容可由子元素里的子元素任意撑开,优雅地溢出。但flex IE8/IE9不支持。

总结:

方法介绍完了,问题讲清楚了,废话我就不多说了哦,完结撒花~~~