我有一个包含文本的<div>元素,我想将这个<div>的内容垂直居中对齐。

这是我的<div>风格:

#盒子{高度:170px;宽度:270px;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}<div id=“box”>Lorem ipsum悲哀坐</div>

实现这一目标的最佳方式是什么?


当前回答

较新的浏览器现在支持CSS calc功能。如果您针对的是这些浏览器,您可能需要考虑这样做:

<div style=“位置:相对;宽度:400px;高度:400px,背景色:红色”><span style=“位置:绝对;行高:40px;高度:80px;文本对齐:居中;宽度:300px;溢出:隐藏;顶部:计算(50%-40px);左侧:计算(50%-150px);”>这里有两条线,即使父div改变大小,也会居中。</span></div>

关键是在绝对或相对定位的父除法中使用style=“top:calc(50%-[inerFixedHeightInPX/2]px);height:[inerFixed HeightInPX;”。

其他回答

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

将此小代码添加到元素的CSS属性中。太棒了。试试看!

一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右:

margin-top: 45%;

你可能需要玩这个数字,但它将位于周围分区的中心。

作为答案被接受的解决方案是完美的,使用与div高度相同的行高度,但当文本被换行或是两行时,此解决方案无法完美工作。

如果文本被换行或在div中的多行上,请尝试此操作。

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

有关更多参考信息,请参阅:

垂直居中多行文本CSS垂直居中的6种方法

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>

无论您想要垂直居中样式,都可以尝试显示:表格单元格和垂直对齐:中间。

例子:

#盒子{显示:表格单元格;垂直对齐:中间;高度:90px;宽度:270px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;页边空白:20px;左边距:5px;}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>