没有 flexbox 的元素 CSS 的中心对齐答案

【问题标题】：Central align of elements CSS without flexbox没有 flexbox 的元素 CSS 的中心对齐
【发布时间】：2020-12-04 18:52:56
【问题描述】：

我无法让文本出现在网页的屏幕中间（高度方向）。该网站的 HTML 是：

<html lang="en">
    <head>
        <title>example</title>
        <link href="example.css" rel="stylesheet">
    </head>

    <body>        
        <div class="home-container">
            <div class="home-row">
                <div class="some-other-class">
                    <p>text that should be in the middle</p>
                </div>
            </div>
        </div> 
    </body>
</html>

我想要做的是让 home-container 元素一直延伸到页面底部，并在其中间放置 text that should be in the middle。我的css 看起来像：

html, body{
    height:100%;
}


.home-container{
    width: 100%;
    height: 100%;
    background-color: rgba(139,0,0,0.4);
}

.home-row{
    vertical-align: middle;
}

我知道，如果我改成这样home-container，我想做的事情是可能的：

.home-container{
    width: 100%;
    height: 100%;
    background-color: rgba(139,0,0,0.4);
    align-items: center;
    display: flex;
}

但这不适用于所有浏览器。我对 vertical-align 属性做错了什么？在我的示例中，Id 并没有真正做任何事情...

【问题讨论】：

要能够使用vertical-align，您需要在大容器（.home-container）上使用display:table，在.home-row上使用display:table-cell
使用 CSS 表格和定位属性：stackoverflow.com/a/31977476/3597276

标签： html css

【解决方案1】：

要使用vertical-align:middle 在.home-row 上添加display:table-cell，在.home-container 上添加display:table

看这里jsfiddle或sn-p

html,
body {
  height: 100%;
}



.home-row {
  vertical-align: middle;
  display: table-cell;
}

.home-container {
  width: 100%;
  height: 100%;

  background-color: rgba(139, 0, 0, 0.4);
  display: table;

}

<div class="home-container">
  <div class="home-row">
    <div class="some-other-class">
      <p>text that should be in the middle</p>
    </div>
  </div>
</div>

vertical-align CSS 属性指定内联或表格单元框的垂直对齐方式。

在此处阅读更多信息vertical align

编辑 2020 使用flexbox 有更好的方法来实现相同的结果

检查下面的sn-p

玩转flexbox。您可以将其添加到其他项目上，而不仅仅是容器

.home-container {
  background: red;
  display:flex;
  flex-direction: column;
  justify-content: center;
  height:100vh;
 }

<div class="home-container">
  <div class="home-row">
    <div class="some-other-class">
      <p>text that should be in the middle</p>
    </div>
  </div>
</div>

【讨论】：

它也适用于内联元素。欲了解更多信息，请阅读此处developer.mozilla.org/en/docs/Web/CSS/vertical-align

【解决方案2】：

试试这个：

 <style>
    .home-container {
        width: 100%;
        height: 800px;
        background-color: rgba(139, 0, 0, 0.4);
        text-align: center;
    }

    .some-other-class {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

HTML

<div class="home-container">
    <div class="some-other-class">
        <p>text that should be in the middle</p>
    </div>
</div>

【讨论】：

【解决方案3】：

html, body{
  height:100%;
  margin: 0;
}

.home-container{
  width: 100%;
  height: 100%;
  display: table;
  text-align: center;
  background-color: rgba(139,0,0,0.4);
}

.home-row{
  display: table-cell;
  vertical-align: middle;
}

<html lang="en">
  <head>
    <title>example</title>
    <link href="example.css" rel="stylesheet">
  </head>
  <body>        
    <div class="home-container">
      <div class="home-row">
        <div class="some-other-class">
          <p>text that should be in the middle</p>
        </div>
      </div>
    </div> 
  </body>
</html>

【讨论】：