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

这是我的<div>风格:

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

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


当前回答

供参考并添加更简单的答案:

纯CSS:

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

或作为SASS/SCSS混合物:

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

使用人:

.class-to-center {
    @include vertical-align;
}

由Sebastian Ekström的博客文章垂直对齐任何东西,只需3行CSS:

由于元素放置在“半像素”上,此方法可能会导致元素模糊。对此的解决方案是将其父元素设置为preserve-3d。如下所示:

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

我们生活在2015年+,每个主要的现代浏览器都支持Flex Box。

这将是网站从现在开始制作的方式。

学习它!

其他回答

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

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

供参考并添加更简单的答案:

纯CSS:

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

或作为SASS/SCSS混合物:

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

使用人:

.class-to-center {
    @include vertical-align;
}

由Sebastian Ekström的博客文章垂直对齐任何东西,只需3行CSS:

由于元素放置在“半像素”上,此方法可能会导致元素模糊。对此的解决方案是将其父元素设置为preserve-3d。如下所示:

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

我们生活在2015年+,每个主要的现代浏览器都支持Flex Box。

这将是网站从现在开始制作的方式。

学习它!

<!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%;}.父级{空白:nowrap;高度:100%;文本对齐:居中;}.父项:在之后{显示:内联块;垂直对齐:中间;高度:100%;内容:“”;}.居中{显示:内联块;垂直对齐:中间;空白:正常;}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p></div></div>

您可以在CSS中使用定位方法:

检查此处的结果。。。。

HTML格式:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv {
    position: relative;
    border: 1px solid #DDD;
    height: 300px;
    width: 300px
}
.relativediv p {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}