提问



我试图找到最有效的方法来将文本与div对齐。我尝试了一些东西,似乎都没有用。




.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>



CSS中的垂直居中

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html[89]


文章摘要:


对于CSS2浏览器,可以使用display:table/display:table-cell来居中内容。


样本也可以在JSFiddle上找到:[90]




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>



您需要添加line-height属性,该属性必须与div的高度匹配。在你的情况下:




.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>



更新 - 这是一个很好的资源



http://howtocenterincss.com/[91]



  以CSS为中心是一个痛苦的屁股。根据各种因素,似乎有很多方法可以做到这一点。这可以整合它们,并为您提供每种情况所需的代码。



更新 - 使用Flexbox



为了使这篇文章与最新的技术保持同步,这里有一个更简单的方法来使用flexbox中心化。在IE9 and lower中不支持Flexbox。


这里有一些很棒的资源:



  • flexbox指南

  • 使用flexbox中心元素

  • flexbox的IE10语法

  • 支持Flexbox



jsfiddle with browser prefixes [92] [93] [94] [95] [96]


HTML


<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>


CSS


li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}


更新 - 另一种解决方案



这是来自 zerosixthree ,让你用6行css [97]居中


IE8 and lower不支持这种方法


jsfiddle [98]


HTML


<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>


CSS


p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


上一个答案



简单和跨浏览器方法,作为标记答案中的链接有用略微过时。



  如何在无序列表和div中垂直和水平居中文本,而不依赖于JavaScript或css行高。无论您有多少文本,您都不必将任何特殊类应用于特定列表或div(每个代码都相同)。这适用于所有主流浏览器,包括IE9,IE8,IE7,IE6,Firefox,Chrome ,Opera和Safari。由于现代浏览器不具备的css限制,有2种特殊的样式表(IE7为1,IE6为另一种)以帮助他们。



Andy Howard - 如何在无序列表或div中垂直和水平居中文本

[99]



因为我在上一个项目中并不关心IE7/6,所以我使用了一个稍微剥离的版本(即移除了使它在IE7和6中工作的东西)。可能对其他人有用...


jsfiddle [100]


HTML


<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>


和CSS:


.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}

最佳参考


display: flex很容易。使用以下方法,div中的文本将垂直居中:




div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>



我使用以下内容轻松地垂直居中随机元素:


HTML:



<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>


CSS:



#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}


这使我的div中的文本居中到200px高的外部div的确切垂直中间。请注意,您可能需要使用浏览器前缀(例如我的情况下为-webkit-)才能使其适用于您的浏览器。


这不仅适用于文本,也适用于其他元素。

其它参考1


您可以通过将显示设置为table-cell并应用vertical-align:middle来完成此操作;


    {
        display:table-cell;
        vertical-align:middle;
    }


但是,根据我未经许可从http://www.w3schools.com/cssref/pr_class_display.asp复制的摘录,所有版本的Internet Explorer都不支持此功能。[101]


注意:值inline-table,table,table-caption,table-cell,table-column,table-column-group,table- IE7及更早版本不支持row,table-row-group和inherit。 IE8需要一个!DOCTYPE。 IE9支持这些值。


下表显示了http://www.w3schools.com/cssref/pr_class_display.asp中允许的显示值。我希望这会有所帮助[102]




其它参考2


这是我最喜欢的解决方案(简单且非常好的浏览器支持):




div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p>
</div>


   
   



这是一个最适合单行文本的解决方案。


如果已知行数,它也适用于多行文本,并进行一些调整


.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}


这是一个JSFiddle [103]

其它参考3


<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>

其它参考4


检查一下这个简单的解


HTML


<div class="block-title"><h3>I'm a vertically centered element</h3></div>


CSS


.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}


jsfiddle [104]

其它参考5


有一种更简单的方法可以垂直对齐内容而无需使用table/table-cell:


http://jsfiddle.net/bBW5w/1/[105]


在其中我添加了一个不可见(width=0)div,它假设容器的整个高度。


它似乎适用于IE和FF(最新版本),没有与其他浏览器检查


  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>


当然还有CSS:


.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}

其它参考6


这是我发现的最干净的解决方案(IE9 +),并通过使用transform-style添加其他答案省略的off by .5 pixel问题。


.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);    
}


资料来源:http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/[106]

其它参考7


简单解决不知道价值的因素


HTML


<div class="main">
    <div class="center">
        whatever
    </div>
</div>


CSS


.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

其它参考8


您可以使用flexbox在div内垂直对齐中心文本。


<div>
   <p class="testimonialText"> This is the testimonial text. </p>
</div>

div {
   display: flex;
   align-items: center;
}


您可以在此链接上了解有关它的更多信息:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/[107]

其它参考9


使用flex时要小心浏览器渲染的差异。


这适用于Chrome和IE:




.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>



根据Adam Tomat的回答,准备了一个 jsfiddle 示例来对齐 div [108]中的文本


<div class="cells-block">    
    text<br/>in the block   
</div>


在CSS中使用 display:flex


.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* vertically   */
    justify-content: flex-end; /* horisontally */
    text-align: right;         /* addition: for text's lines */
}


另一个示例,博客中的解释很少。[109] [110]

其它参考10


HTML


<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>


CSS


 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }

其它参考11


这是CSS中使用calc()div模式中div的另一种变体。


<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>


这有效,因为:



  • position:absolutediv精确放置在div

  • 我们知道内部div的高度,因为我们将其设置为20px

  • calc(50% - 10px) 50% - 高度的一半用于居中div


其它参考12


工作正常


HTML


<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>


上海社会科学院


.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}


没有和带有图片标签<mat-icon>(这是一种字体)

其它参考13


没有一个答案帮助我,试试这个,加上父div:


display:flex;
align-items:center;

其它参考14




  h1{
  margin:0;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

    <div class="container">
            <h1>vertical align text</h1>
    </div>



尝试嵌入表元素。


<div>
    <table style='width:200px; height:100px;'>
        <td style='vertical-align:middle;'>
            copenhagen
        </td>
    </table>
</div>

其它参考15


嗯,显然有很多方法可以解决这个问题。


但我有一个<div>绝对定位,height:100%(实际上,top:0;bottom:0和固定宽度)和display:table-cell只是没有工作使文本垂直居中。我的解决方案确实需要一个内部span元素,但是我看到许多其他解决方案也有,所以我不妨添加它:


我的容器是.label,我希望数字垂直居中。我通过绝对定位top:50%和设置line-height:0来做到这一点


<div class="label"><span>1.</span></div>


CSS如下:


.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}


看到它在行动:http://jsfiddle.net/jcward/7gMLx/[111]

其它参考16


使用css网格为我做了。


.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

其它参考17


在Div的中心有几个技巧来显示内容/图像。一些答案非常好,我完全同意这些。[112]


CSS中的绝对水平和垂直居中


http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizo​​ntal-and-vertical-centering-in-css/[113]


实例中有超过10种技术。现在它取决于你喜欢的。[114]


毫无疑问,display:table; display:table-Cell是一个更好的技巧。


一些好的技巧如下:


技巧1 - 使用display:table; display:table-cell


HTML


<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT 
    </div>
  </div>
</div>


CSS代码


.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}


技巧2 - 使用display:inline-block


HTML


<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT 
  </div>
</div>


CSS代码


.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}


技巧3 - 使用position:relative;position:absolute


<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER,<br>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

其它参考18


CSS:


.vertical {
   display: table-caption;
}


将此类添加到包含要垂直对齐的内容的元素

其它参考19


如果你需要使用min-height属性,你必须添加这个CSS:


.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

其它参考20


这很简单,来自文档:[115]



  vertical-align CSS属性指定了一个的垂直对齐方式
  内嵌或表格单元格框。



#HTML
<div>
  <span>Text</span>
</div>

#CSS
span {
  vertical-align: middle;
}