Question

我知道如何在知道文本高度时垂直对齐div中的文本中心。假设文本的高度为20px。

用跨度包裹文本。风格div＆amp;跨度。

div {
     position: relative;
}
span {
    display: block
    position: absolute;
    top: 50%;
    height: 20px;
    margin-top: -10px;
}

现在我想响应对齐文本。我想要的是文本的字体大小与身体的高度成比例。说我有以下风格：

body {
    font-size: 100%;
}
span {
    font-size: 1.5em;
}

然后我会在窗口大小改变时更改正文的字体大小。在这种情况下，文本的高度未确定。那么如何垂直对齐文本中间？

我知道我可以使用JavaScript动态更改跨度的高度和margin-top。但是在窗口大小改变后我必须这样做。然后有可能窗口大小发生变化，然后用户看到不在中间的文本，然后执行JS代码并将文本跳转到div的中间。这可能不是一个可接受的解决方案。

我想知道是否有纯CSS解决方案。

我想我可以使用以下样式垂直对齐文本中心。

div {
    display: table-cell;
    vertical-align: middle;
}

但是使用此解决方案，div的边距未正确呈现。语义不对。

那么有一个完美的解决方案吗？

Answer 1

另一个没有表格显示属性的纯CSS（ CSS3 ）解决方案是使用 transform：translateY（）属性。

你需要一个容器div和内部跨度文本：

<强> HTML

<div id="container">
    <span>Your Text</span>
</div>

<强> CSS

#container{
    position: relative;
}

#container span{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

    /* Your font-size CSS */
}

JsFiddle示例： https://jsfiddle.net/a0m4xnex/1/

您可以使用相同的策略进行水平居中以及translateX。

Answer 2

Helper Div可以帮助您垂直对齐div

最适合我，你可以相应改变它

＆＃13;

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

＆＃13;

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

＆＃13;

Answer 3

使用flex box，您可以执行此操作： JSBIN

基本上，这是代码（记得在需要时添加前缀）：

html, body { height: 100%; margin: 0px; }

body {
  display: flex;
  justify-content: center; /* horizontal centering */
}

div {
   align-self: center; /* vertical centering */
}

<body>
  <div>Centered</div>
</body>

文本如何在div中响应地对齐中间

3 个答案:

Helper Div可以帮助您垂直对齐div