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

这是我的<div>风格:

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

其他回答

您可以使用以下代码段作为参考。这对我来说就像一种魅力:

html,正文{高度:100%;边距:0;填充:0;宽度:100%;}正文{显示:表格;}.居中文本{文本对齐:居中;显示:表格单元格;垂直对齐:中间;}<div class=“居中文本”><h1>是的,这是我的登录页</h1><h2>正在建设中,即将到来</氢气></div>

上述代码段的输出如下:

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

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

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

为此,我们写下:

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

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

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

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

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

您还可以使用以下财产。

display: flex; 
align-content: center; 
justify-content : center;

绝对定位和拉伸

与上面的方法一样,首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。

在下面的代码中,我再次使用了该方法来水平和垂直地居中子对象,尽管您只能使用该方法进行垂直居中。

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

此方法的思想是通过将上、下、右和左值设置为0,尝试使子元素延伸到所有四条边。因为我们的子元素比我们的父元素小,所以它不能到达所有的四条边。

然而,将自动设置为所有四边的边距会导致相反的边距相等,并将子div显示在父div的中心。

不幸的是,上面的方法在InternetExplorer7及以下版本中不起作用,并且像前面的方法一样,子div中的内容可能会变得太大,导致其被隐藏。