Question

我最近一直在为<body> <div class="top"> <div class="inline color2 player1 polygon"> <div class="title">KDZaster</div> </div> <div class="inline color1 round polygon"> <div class="title">Grand Finals</div> </div> <div class="inline color2 player2 polygon"> <div class="title">DarthArma</div> </div> </div> </body>使用display: table和html display: table-cell，以使我的页面的所有内容都显示在我的body的正中心屏幕。虽然，这适用于段落，标题，输入和标签等（至少我已经测试过），它似乎不适用于div元素。
有没有办法让div元素像其他元素一样工作？纯CSS解决方案是最好的。

示例（also on Codepen）

html {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}
body {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}
.leaf {
  border-radius: 15px 2px 15px 2px;
  border: 1px solid green;
  background-color: green;
  width: 250px;
  height: 80px;
}

<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>

Answer 1

只需添加margin: 0 auto; ..正常工作。

html {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}
body {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}
.leaf {
  border-radius: 15px 2px 15px 2px;
  border: 1px solid green;
  background-color: green;
  width: 250px;
  height: 80px;
  margin:0 auto;

}

<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>

Answer 2

只需将 margin：0 auto; 添加到.leaf类。

＆＃13;

html {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}
body {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}
.leaf {
  margin: 0 auto;
  border-radius: 15px 2px 15px 2px;
  border: 1px solid green;
  background-color: green;
  width: 250px;
  height: 80px;
}

＆＃13;

<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>

＆＃13;

使用display时，Div不居中：table-cell

2 个答案: