Question

我想垂直和水平地将一些文本放在包含旁边图像的div中。到目前为止，我只是将它水平居中，并且令人不安的是让它垂直居中。我知道有很多这样的帖子，并提到一些绝对定位，但每次我尝试它时，一切都只是重叠。

继承人jsfiddle：https://jsfiddle.net/kkae9rzy/

如果您水平展开结果屏幕以使所有内容都在同一条线（基线）上，您将看到文本不是垂直居中的。

下面是我的css的代码：

#titleheader{
   margin:auto;
   text-align: center;
   padding:100px;
   background:#f2f2f2;
}

#titleheader > h1 {
   padding-left: 75px;
   padding-right: 75px;
   display:inline-block;
   font-family: "Bariol_Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #555;
   letter-spacing: 3px;
   font-size: 50px;
}

#wind{
   display:inline-block;
}
#intel{
   display:inline-block;
}

Answer 1

我没有看到任何东西是＆＃34;垂直居中＆＃34;在您的版本中，我在vertical-align: middle代码中添加了<img>（通过css），看起来就是您想要的内容。请参阅fiddle。

Answer 2

您可以使用flexbox布局来实现此目的，以及其他一些方法。

这是使用flexbox方法修改CSS的小提琴。请特别注意#titleheader。 http://logging.apache.org/log4j/2.x/manual/customconfig.html

您会看到我向#titleheader添加了一些弹性箱规则：

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

display: flex;告诉#titleheader使用flexbox显示布局。

（有关flexbox的更多信息，请参阅https://jsfiddle.net/kkae9rzy/2/和http://dev.w3.org/csswg/css-flexbox/）

align-items: center;告诉#titleheader将其所有子项与十字轴的中心对齐（对于我们的演示，X轴，所以它是＆＃39; s垂直居中）。

justify-content: center告诉#titleheader将其所有子项与主轴的中心对齐（对于我们的演示，Y轴，所以它是＆＃39; s水平居中他们）。

flex-wrap: wrap告诉#titleheader将子元素包装到新行上，而不是强制它们全部在同一行上，无论有多少屏幕空间可用。

Flexbox是一款功能非常强大的工具。它在浏览器支持方面迅速获得，我怀疑我们很快就能开始使用它，而不会有太多的polyfill。

以下是对flexbox的当前支持：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

为了确保在使用flexbox时提供最广泛的支持，请确保包含我在上面提到的所有供应商前缀版本的flexbox声明。这可以使用autoprefixer（http://caniuse.com/#feat=flexbox）之类的工具来实现，它可以在编译时为CSS添加所有必需的供应商前缀。

包含我上面提到的属性的所有供应商前缀看起来像这样：

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;

-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

Answer 3

这应该有效

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

水平和垂直居中文本

3 个答案: