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

这是我的<div>风格:

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

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


当前回答

这是个更好的主意。你也可以这样做

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

其他回答

这很简单,也很短:

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

对于单行文本(或单个字符),可以使用以下技术:

当#box具有非固定的相对高度(以%为单位)时,可以使用它。

<div id="box"></div>
#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

在JsBin(更容易编辑CSS)或JsFiddle(更容易更改结果框的高度)观看现场演示。

如果你想将内部文本放在HTML中,而不是CSS中,那么你需要将文本内容包装在额外的内联元素中,然后编辑#box::after以匹配它。(当然,content:property应该被删除。)

例如<div id=“box”><span>文本内容</span></div>。在这种情况下,#box::after应替换为#box span。

对于Internet Explorer 8支持,必须将::替换为:。

另一种方式:

不要设置div的height属性,而是使用padding:来实现效果。与行高度类似,它仅在您有一行文本时有效。尽管这样,如果您有更多的内容,文本仍然会居中,但div本身会稍微大一些。

因此,与其继续:

div {
  height: 120px;
  line-height: 120px;
}

你可以说:

div {
   padding: 60px 0; /* Maybe 60 minus font-size divided by two, if you want to be exact */
}

这会将div的顶部和底部填充设置为60px,左侧和右侧填充设置为零,使div高120像素(加上字体的高度),并将文本垂直居中放置在div中。

一个非常简单和最强大的垂直对齐中心的解决方案:

.外部div{高度:200px;宽度:200px;文本对齐:居中;边框:1px实心#000;}.内部{位置:相对;顶部:50%;变换:translateY(-50%);颜色:红色;}<div class=“outer div”><span class=“inner”>无可用数据</span></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。

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

学习它!