Welcome, Old Sport!

CSS实现垂直居中的两种方式

by ilikecss ON 2014/02/19 3538

CSS实现垂直居中的两种方式不同行业不同需求,现在做的东西很多在以前公司都不用的,正好给我复习复习。最近工作上遇到的垂直居中的问题,在网上搜罗了一些资料在这里给大家讲解一下,在容器里内容始终垂直居中,实现这个效果我有2种方法,一起来看实例。

第一种方法可以用CSS3的transform属性来实现,如下建立父子级的容器和CSS。这种方法有点类似相对/绝对定位关系。由于top属性是内联的,我们需要在子级减去这些高度就可以得到居中的效果了。

<div class="parent">
    <div class="children"></div>
</div>
.children {
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%); /* For IE */
}

第二种方法是使用display元素的table化属性。我们知道在css2中display有table和table-cell属性,类似将div元素table化,这样我们也可以将内容垂直居中。注意父级容器的高度必须标注,它是子级容器的参考标准。

<div class="parent1">
    <div class="children1"></div>
</div>
.parent1 {
	display: table;
}
.children1 {
	display: table-cell;
        vertical-align: middle;
}

一起来看下这两种方法的浏览器支持表, transform需要IE8以上,而table则IE7以上支持。所以使用第二种方法大家可以写一些padding的hack,保证在IE7以下垂直高度一样,如:

*padding-top: XXpx;
_padding-top: XXpx;
3条评论
  1. #1

    zwwooooo说道:

    文字好办,容器就麻烦点了

  2. #2

    Jay Chen说道:

    try this :
    position: absolute;
    width: 200px;
    height: 200px;
    background: aquamarine;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;




TOP