纯CSS实现元素的自适应上下居中

在我们常用的布局中,经常会出现一个布局就是:居中,左右居中,并且上下居中。看到这里,您也许已经对每一种布局,都有自己的认识了,但是在上下居中的布局中,如何才能更好的实现上下的自适应布局呢?即,需要居中显示的元素高度是不定的,这里不讨论具体有哪些方案可以解决这个问题,但是可以给出一个纯CSS解决的方案。

基本

该解决方案的使用到的CSS3的属性flexflex-flow,但是呢,我这里也不会细致的来对这两个属性进行说明,所以,如果您对它们不太熟悉,那么建议您去先看一下它们的基本使用说明。

结构

在接下来的示例中,我都会使用以下的基本结构:


11
11

其中,.box元素,是区域元素,内部的元素会在该元素内部进行上下居中。.center元素是需要居中的元素,而.prev,.next元素在这里,是用于辅助的元素,其内部不包含任何东西。

后面的不同的布局,都是使用的该格式。

center元素上下居中


.box{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-flow : column nowrap;
    flex-flow : column nowrap;
    height:400px;
    background-color:#eee;
}

.prev,.next{
    -webkit-flex:1 1 0px;
    flex:1 1 0px;
    background-color:#bbb;
}

.center{
    background-color:#ccc;
    margin-left : auto;
    margin-right : auto;
    width : 100px;
}


看示例源代码,请看PC端:http://www.zhangyunling.com/study/2016/20160709/flex-middle-pc.html

看示例源代码,请看Mobile端:http://www.zhangyunling.com/study/2016/20160709/flex-middle-mobile.html

看手机端支持:二维码

center元素上下不同比例

假设元素,离头部和底部的比例是1:2,那么在上述的基础上,可以如下的更改即可:


.prev{
    -webkit-flex:1 2 0px;
    flex:1 2 0px;
    background-color:#bbb;
}
.next{
    -webkit-flex:2 1 0px;
    flex:2 1 0px;
    background-color:#bbb;
}


看示例源代码,请看PC端:http://www.zhangyunling.com/study/2016/20160709/flex-pc.html

看示例源代码,请看Mobile端:http://www.zhangyunling.com/study/2016/20160709/flex-mobile.html

看手机端支持:二维码

align-items属性实现元素的上下居中

前面的实现方式,虽然可以更好的控制上下留空的比例,但最是缺添加了两个空的DIV做为辅助标签,如果我们只是单纯的上下居中的话,那么有一个align-items属性,能更简洁的实现该布局。并且,她的HTML结构也更简单,代码如下:


11
11

CSS的实现:


body{margin:0px;padding:0px;}
.box{
    display:-webkit-flex;
    display:flex;
    height:100px;
    background-color:#eee;
    -webkit-align-items:center;
    align-items:center;
}
.center{
    margin:0px auto;
    background-color:#aaa;
    width:50px;
    height:50px;
}


看示例源代码,请看PC端:http://www.zhangyunling.com/study/2016/20160709/flex-align-pc.html

看示例源代码,请看Mobile端:http://www.zhangyunling.com/study/2016/20160709/flex-align-mobile.html

看手机端支持:二维码

align-self属性实现元素的上下居中

上面完了,这里还有另外一个属性,也可以实现和align-items相同的功能,只要对它的CSS进行一些简单的修改,CSS样式如下,示例请自行测试:


body{margin:0px;padding:0px;}
.box{
    display:-webkit-flex;
    display:flex;
    height:100px;
    background-color:#eee;
}
.center{
    margin:0px auto;
    background-color:#aaa;
    width:50px;
    height:50px;
    -webkit-align-self: center;
    align-self: center;
}


总结

flex属性在移动端的支持已经很好了,如果是使用的chrome,那么基本可以不用考虑兼容性的问题,不过在Andriod4.4之前的默认浏览器,好像支持性不太好,这个我就没有测试了,理论上,只要能支持flex属性的浏览器,该方法都可以很好的表现的。

所以,如果您发现,某些机器的某些浏览器,使用该方法无法实现自适应上下居中,那么请测试该浏览器是否支持flex的情况,也请指教,谢谢!

本文地址:http://www.zhangyunling.com/?p=537

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>