Question

我希望在其高度不固定时，在没有JavaScript的情况下垂直居中div。

我发现了here一个想法。

我想知道这个问题是否有其他解决办法。

Answer 1

这有效：

看看它是如何在盒子内垂直对齐的。高度也不固定。

希望它能回答你的问题。

<html>
<head>
    <title>HTML Div vertical align using CSS</title>
    <style type="text/css">
        .outerDiv {
            border: solid 1px #000000;
            width: 300px;
            padding: 5px 2px 5px 2px;
        }

        .innerDiv {
            width: 95%;
            margin: 0px auto;
            padding: 40px 0px 40px 5px;
            border: solid 1px #000000;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv">
            This text is placed inside the next HTML div tag.<br />
            CSS style is used to vertical align the nested div and text.
        </div>
    </div>
</body>
</html>

Answer 2

虽然这是一个老话题，但我认为这个答案可能对某人有所帮助。如果IE的版本至少是IE的灵活性> 8，然后您可以使用display:table-cell并使用默认的vertical-align功能。

在下面的代码中，div.hover（即将在中间垂直对齐的div）未分配任何高度，但是父项被指定为100％高度以填充屏幕。

检查出来

.outer {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #aaa;
  display: table;
}
.inner {
  display: table-row;
  border: 1px solid #0f0;
  height: 100%;
}
.center {
  display: table-cell;
  border: 1px solid #00f;
  vertical-align: middle;
  height: 100%;
}
.hover {
  width:100px;
  border: 1px solid #f00;
  margin-left: auto;
  margin-right: auto;
}

<div class="outer">
  <div class="inner">
    <div class="center">
      <div class="hover">
        I am a random text to give the div some height
      </div>
    </div>
  </div>
</div>

当div的高度不固定时，没有Javascript的div的垂直居中

2 个答案: