css 让文本框水平垂直居中,CSS：水平和垂直居中文本？

不知怎的，还是有这样做没有标准，但以我的经验大概就是下面的整体最可靠的解决方案：

#container {

display:table;

border-collapse:collapse;

height:200px;

width:100%;

border:1px solid #000;

}

#layout {

display:table-row;

}

#content {

display:table-cell;

text-align:center;

vertical-align:middle;

}

Hello world!

这里的另一种技术利用相对和绝对定位来模拟居中位置。这种技术并不确切，但它应该是用任何浏览器(甚至是早期的)兼容：

#vertical{

position:absolute;

top:50%; /* adjust this as needed */

left:0;

width:100%;

text-align:center;

}

#container {

position:relative;

height:200px;

border:1px solid #000;

}

Hello world!

重要提示：

当这个问题被问的人似乎都在暗示line-height作为解决方案，但我会恳求你避开这个建议。当你展示像“Hello World”这样简单的东西时，它看起来不错，但是line-height在文字换行时突然崩溃。