Question

我在网页上的屏幕中间（高度方向）显示文本时遇到问题。该网站的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属性做错了什么？在我的例子中，我并没有真正做任何事......

Answer 1

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

点击此处 jsfiddle

代码：

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

}

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

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

在此处阅读更多 vertical align

Answer 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>

Answer 3

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 4

除了其他人的答案，你可以看到这两个关于css居中的教程，它们对你很有帮助

http://vanseodesign.com/css/vertical-centering/

https://www.youtube.com/watch?v=hIG-fZ2042k

Answer 5

使用align-items:center-假定元素的flex-direction为默认值（row），它将使用的元素的内容垂直居中。

使用以下两种方法之一。

使用height: 100vh-设置元素的高度等于视口初始包含块的高度的100％。

.home-container {
  background: red;
  display: flex;
  align-items: center;
  height: 100vh;
}

<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>

在其所有父项（包括自身）上使用height: 100%。

html,
body {
  height: 100%;
}

.home-container {
  height: 100%;
  background: red;
  display: flex;
  align-items: center;
}

<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>

您可能会发现此链接很有帮助。

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

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

5 个答案: