这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性。
HTML & CSS:
1 <div class="wrapper"> 2 <div class="cell"> 3 <div class="content"> 4 <h1>把div显示方式设置为表格</h1> 5 </div> 6 </div> 7 </div>
1 .wrapper {display:table;background: #FC172E;width: 30%;height: 600px;} 2 .cell { 3 display:table-cell; 4 vertical-align:middle; 5 }
运行效果:
优点:
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时, content 不会被截断
缺点:
Internet Explorer(甚至 IE8 beta)中无效
这个方法使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
因为有固定高度,或许你想给 content 指定 overflow:auto
,这样如果 content 太多的话,就会出现滚动条,以免content 溢出。
HTML & CSS:
1 <div class="content"> 2 对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。 3 </div>
1 .content { 2 background: #272822; 3 position:absolute; 4 top:50%; height:440px;width: 500px; 5 margin-top:-220px; /* 为高度的一半 */ 6 }
运行效果:
优点:
适用于所有浏览器
不需要嵌套标签
缺点:
没有足够空间时,content 会消失(类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况)
这个方法使用了一个 position:absolute
,有固定宽度和高度的 div
。这个 div
被设置为 top:0; bottom:0;
。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto
; 会使它居中。使用 margin:auto;
使块级元素垂直居中是很简单的。
HTML:
1 <div class="content"> 2 这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。 3 </div>
CSS:
1 .content { 2 position:absolute; 3 top:0; 4 bottom:0; 5 left:0; 6 right:0; 7 margin:auto; 8 height:440px; 9 width:70%; 10 background: #346FCE; 11 }
运行效果:
优点:
简单
缺点:
IE(IE8 beta)中无效
无足够空间时,content 被截断,但是不会有滚动条出现
这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
HTML:
1 <div id="content"> 2 这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。 3 </div>
CSS:
1 #content { 2 margin: 50px auto; 3 height:300px; 4 line-height:300px; 5 background: #EAA527; 6 }
运行结果:
优点:
适用于所有浏览器
无足够空间时不会被截断
缺点:
只对文本有效(块级元素无效)
多行时,断词比较糟糕
这个方法在小元素上非常有用,例如使按钮文本或者单行文本居中。
这种方法,在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;
。
content 清除浮动,并显示在中间。
HTML:
1 <div class="content"> 2 在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight; content 清除浮动,并显示在中间。 3 </div>
CSS:
1 .floater { 2 float:left; 3 height:50%; 4 position:relative; 5 margin-top:-250px; 6 } 7 .content { 8 clear:both; 9 height:500px; 10 background: #67930F; 11 position:relative; 12 }
运行效果:
优点:
适用于所有浏览器
没有足够空间时(例如:窗口缩小) content 不会被截断,滚动条出现
缺点:
唯一能想到的就是需要额外的空元素
使用了一个 position:absolute
,有固定宽度和高度的 div
。这个 div
被设置为 top:0; bottom:0;
。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto
; 会使它居中。使用 margin:auto;
使块级元素垂直居中是很简单的。
比较简单,而且让元素垂直居中的同时,元素也能够横向居中。
对于非块级元素而言,我们可以在外部添加 块级元素作为盒子,也可以通过 display 属性,将行内元素变为块级元素,再使用此方法。
( 来源于http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/)