我有一个包含文本的<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。

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

学习它!

其他回答

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

纯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。

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

学习它!

灵活的方法

第二部分{宽度:250px;最小高度:50px;线条高度:50px;文本对齐:居中;边框:1px实心#12346;边距底部:5px;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>Lorem ipsum dolor坐amet,consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet,consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet,consectetur adipiscing elit</span></div><div><span>Lorem ipsum dolor坐amet,consectetur adipiscing elit</span></div><div><span>Lorem ipsum dolor坐amet</span></div><div>

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

margin-top: 45%;

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

简单而通用的方法是表格方法):

[ctrv]{
    display: table !important;
}

[ctrv] > *{ /* Addressing direct descendants */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* Optional */
}

在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

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

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

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

为此,我们写下:

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

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

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