CSS：水平和垂直居中文本？ [复制]答案

【问题标题】：CSS: Center text both horizontal and vertical? [duplicate]CSS：水平和垂直居中文本？ [复制]
【发布时间】：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 元素中？

任何帮助都会得到帮助:))

【问题讨论】：

垂直居中不是一件容易的事，实现它的方法取决于一定的标准（有几种不同的方法，但每种都有条件）。

标签： css html

【解决方案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

【讨论】：