Question

有没有办法在同一页面的不同容器内自动垂直和水平居中？我尝试使用前50％和垂直对齐，但它没有工作。我想自动垂直居中，因为如果对象/文本改变大小，它将居中正确的位置。我成功地在水平中心，我不想使用top：px;。我如何使用html5和css做到这一点？ center everything automatically

no center

Answer 1

vertical-align只会将内联元素相对于彼此对齐。它不会按你想要的方式工作。

要像在图片中显示的那样垂直对齐，您需要使用display: flex;，其中包含您可能会觉得有用的其他css属性。

Answer 2

基本上你可以使用

position: absolute;
top: 50%;
transform: translate(-50%);

用于垂直对齐。

但为了使其工作，周围的元素必须具有固定的高度，或者如果它们具有百分比高度，还它们的父元素以及这些元素周围的所有元素一直到body元素需要有百分比高度。

Answer 3

这是一个定义DIV表属性的替代解决方案。在表格单元格中，内容不仅可以水平居中，也可以垂直居中（在班级.x中）。

Codepen：http://codepen.io/anon/pen/WwjQZw

HTML：

<div class="wrap">
  <div class="row_wrap">
    <div class="head x">
      ONE
    </div>
  </div>
  <div class="row_wrap">
    <div class="middle x">
      TWO TWO
    </div>
  </div>
  <div class="row_wrap">
    <div class="bottom x">
      THREE
    </div>
  </div>
</div>

CSS：

body {
  font-size: 36px;
  color: green;
}

.wrap {
  display: table;
  width: 100%;
}

.row_wrap {
  display: table-row;
}

.x {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.head {
  height: 200px;
  background: #fa4;
}

.middle {
  height: 400px;
  background: #4af;
}

.bottom {
  height: 100px;
  background: #a4f;
}

如何自动将同一页面中不同容器内的每个对象/文本居中？

3 个答案: