CSS：水平和垂直居中文本？ [复制]
Posted
技术标签:
【中文标题】CSS：水平和垂直居中文本？ [复制]【英文标题】：CSS: Center text both horizontal and vertical? [duplicate] 【发布时间】：2012-01-01 12:05:10 【问题描述】：我正在创建一个新网站，我需要知道一些事情（将通过示例展示）。
假设我这样做了：
html;
<div id="center-in-bar">
<ul>
<li>content..</li>
<li>content..</li>
<li>content..</li>
<li>content..</li>
</div>
和css：
#center-in-bar
list-style:none;
display:inline-block;
/*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
如何使所有 li 元素水平和垂直居中？在 center-in-bar 元素中？
任何帮助都会得到帮助:))
【问题讨论】：
垂直居中不是一件容易的事，实现它的方法取决于一定的标准（有几种不同的方法，但每种都有条件）。 【参考方案1】：试试这个 CSS sn-p：
#center-in-bar ul
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
#center-in-bar li
...
display:inline; /* you might want to use this instead of "inline-block" */
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
【讨论】：
【参考方案2】：不知何故，仍然没有这样做的标准，但根据我的经验，以下可能是总体上最可靠的解决方案：
<style type="text/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;
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
这是另一种利用相对和绝对定位来模拟居中位置的技术。这种技术并不精确，但它应该兼容任何浏览器（甚至是早期的浏览器）：
<style type="text/css">
#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;
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
重要提示：
当被问到这个问题时，似乎总是有人建议 line-height 作为解决方案，但我恳请您避开该建议。当您演示“Hello World”之类的简单内容时，它看起来不错，但 line-height 在文本换行时会严重中断。
【讨论】：
应该注意table-cell方法在IE的某些版本中不起作用。
没问题。如果您满意，请不要忘记标记答案。【参考方案3】：
如何将块项目（如 DIV）或内联项目（如文本）水平居中
假设您想在浏览器页面上将文档居中，这样无论您调整浏览器的大小，元素始终居中：
body
margin:50px 0px; padding:0px;
text-align:center;
#Content
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
编写此 HTML 以在您的 body 标签之间水平居中：
<body>
<div id="Content">I am a centered DIV</div>
</body>
这将使块级元素水平居中。要使文本、跨度或其他内联元素居中，您需要添加的是：
#Content
width:500px;
margin:0px auto;
text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
padding:15px;
border:1px dashed #333;
background-color:#eee;
如何垂直居中块项目（如 DIV）或内联项目（如文本）
注意：不要使用 line-height 来垂直居中元素，因为它只适用于一行文本，仅此而已。
至于垂直居中项目，您可以使用 3-5 种方法，具体取决于您要居中的什么。
本网站为您轻松描述了每种方法： http://blog.themeforest.net/tutorials/vertical-centering-with-css/
祝你好运！
【讨论】：
博客不再工作（可悲的是主题森林不做 301，他们有多么糟糕的 SEO 团队）任何 jsfiddle 的机会【参考方案4】：您应该为 line-height 和 height 赋予相同的值。
#center-in-bar li
height: 30px
line-height: 30px;
text-align: center;
也看看这个：Text align vertical within li
【讨论】：
以上是关于CSS：水平和垂直居中文本？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章