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

这是我的<div>风格:

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

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


当前回答

所有功劳都归于该链接所有者@Sebastian Ekström link;请仔细检查一下。在行动代码笔中看到它。通过阅读上述文章,我还创建了一个演示小提琴。

只需要三行CSS(不包括供应商前缀),我们就可以借助转换来实现:translateY垂直居中,即使我们不知道它的高度。

CSS属性转换通常用于旋转和缩放元素,但通过其translateY函数,我们现在可以垂直对齐元素。通常,这必须通过绝对定位或设置行高度来完成,但这些要求您知道元素的高度,或者仅适用于单行文本等。

为此,我们写下:

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

这就是你所需要的。这是一种类似于绝对位置方法的技术,但其优点是我们不必在元素上设置任何高度,也不必在父元素上设置位置属性。它可以直接开箱即用,即使在Internet Explorer 9中也是如此!

为了使其更加简单,我们可以将其编写为带有供应商前缀的混合体。

其他回答

较新的浏览器现在支持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;”。

满足所有垂直对齐需求!

声明此Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中:

.element{
    @include vertical-align();
}

这很简单,也很短:

.块{显示:表格行;垂直对齐:中间;}.平铺{显示:表格单元格;垂直对齐:中间;文本对齐:居中;宽度:500px;高度:100px;}<div class=“body”><span class=“tile”>你好,中间世界!:)</span></div>

尝试转换属性:

#盒子{高度:90px;宽度:270px;位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>

<!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>