水平和垂直居中文本答案

【问题标题】：Horizontally and Vertically Centering Text水平和垂直居中文本
【发布时间】：2015-09-25 09:55:10
【问题描述】：

我想在一个包含旁边图像的 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

我没有看到您的版本中有任何“垂直居中”的内容，但我在<img> 标签中添加了一个vertical-align: middle（通过css），看起来这就是您想要的。请参阅fiddle。

【讨论】：

【解决方案2】：

您可以使用 flexbox 布局以及其他一些方法来实现这一点。

这里是修改 CSS 以利用 flexbox 方法的方法。特别关注#titleheader。 https://jsfiddle.net/kkae9rzy/2/

您会看到我在#titleheader 中添加了一些弹性框规则：

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

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

（有关 flexbox 的更多信息，请参阅 http://dev.w3.org/csswg/css-flexbox/ 和 https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

align-items: center; 告诉#titleheader 将其所有子级对齐到交叉轴 的中心（对于我们的演示，X 轴，所以它垂直居中它们）。

justify-content: center 告诉 #titleheader 将其所有子级对齐到主轴的中心（对于我们的演示，Y 轴，所以它水平居中它们）。

flex-wrap: wrap 告诉#titleheader 将子元素换行，而不是强制它们都在同一行上，而不管有多少可用的屏幕空间。

Flexbox 是一个非常强大的工具。它正在迅速获得浏览器支持，我怀疑我们很快就能在没有太多 polyfill 的情况下开始使用它。

这里是当前对 flexbox 的支持：http://caniuse.com/#feat=flexbox

为确保在使用 flexbox 时获得最广泛的支持，请确保包含我上面提到的所有以供应商为前缀的 flexbox 声明版本。这可以使用 autoprefixer (https://github.com/postcss/autoprefixer) 之类的工具来实现，它会在编译时将所有必要的供应商前缀添加到您的 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;

【讨论】：

【解决方案3】：

这应该可以工作

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

【讨论】：