Question

有两个div。我希望内部div垂直居中，不给边距，因为我希望内部div的高度是自动的，因为它的内容可以改变，高度可以增加。

以下是两个div：

外部div：

    .frontleft{
    width: 602px;
    height: 450px;
    float: left;
    margin: 35px auto;
    z-index: 10;
}

内部div：

.c1{
height: auto;
width: inherit;
}

感谢。

Answer 1

为什么不使用表格呢？使用td标记中的vertical-align。

      <html>
      <body>
      <table class="frontleft">
      <tr><td>I am a sentence</td></tr>
      </table>
      </body>
      </html>

Answer 2

您应该定位内部元素absolute并使用transform属性进行垂直居中。

.frontleft {
  width: 602px;
  height: 450px;
  float: left;
  margin: 35px auto;
  z-index: 10;
  position: relative;
  background: orange;
}
.c1 {
  height: auto;
  width: inherit;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: blue;
}

<div class="frontleft">
  <div class="c1">test</div>
</div>

Answer 3

您可以使用Flexbox。父项display: flex和子项目align-self: center上的.frontleft { width: 602px; height: 450px; float: left; margin: 35px auto; z-index: 10; background: #2C2955; display: flex; } .c1 { height: auto; width: inherit; background: #4C5FB1; align-self: center; }将垂直居中。

<div class="frontleft">
  <div class="c1">Center</div>
</div>

typedef struct {
  Foo *next;
  int i;
} Foo;

如何使这个内部div垂直居中？（使用CSS）

3 个答案:

如何使这个内部div垂直居中？ （使用CSS）

3 个答案:

如何使这个内部div垂直居中？（使用CSS）