Vertical Centering in CSS
(CSS的垂直居中)
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
(http://www.jakpsatweb.cz/css/css-vertical-center-solution.html)
Article summary:
(文章摘要:)
For a CSS 2 browser, one can use display:table
/ display:table-cell
to center content.
(对于CSS 2浏览器,可以使用display:table
/ display:table-cell
来居中显示内容。)
A sample is also available at JSFiddle :
(JSFiddle也提供了一个示例:)
div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;"> <div style="display: table-cell; vertical-align: middle;"> <div> everything is vertically centered in modern IE8+ and others. </div> </div> </div>
It is possible to merge hacks for old browsers (Internet Explorer 6/7) into styles with using #
to hide styles from newer browsers:
(可以使用#
将旧浏览器(Internet Explorer 6/7)的hack合并为样式,以使用较新的浏览器隐藏样式:)
div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style= "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div style=" #position: relative; #top: -50%"> everything is vertically centered </div> </div> </div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…