html - 与表格单元中心对齐

Question

我正在尝试使用表格单元格的方式将 div 垂直和水平居中。

当我使用以下代码时它可以工作：

div {
  display: table;
}
.logo {
  display: table-cell;
  position: absolute;
  vertical-align: middle;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

但我宁愿包装.logo在另一个名为 JSFiddle 的 div.center中，但出于某种原因，虽然它在 JSFiddle 中有效，但在我的网站上却不适合我。

Answer 1

这是一个很好的起点。

HTML：

<div class="containing-table">
    <div class="centre-align">
        <div class="content"></div>
    </div>
</div>

CSS：

.containing-table {
    display: table;
    width: 100%;
    height: 400px; /* for demo only */
    border: 1px dotted blue;
}
.centre-align {
    padding: 10px;
    border: 1px dashed gray;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    vertical-align: top; /* Removes the extra white space below the baseline */
}

参见演示：http: //jsfiddle.net/audetwebdesign/jSVyY/

.containing-table.centre-align为（表格单元格）建立宽度和高度上下文。

您可以根据需要申请text-align和vertical-align更改.centre-align。

请注意，如果要使用 text-align 属性水平居中，则.content需要使用。display: inline-block

Answer 2

使用 flexbox 会更容易做到这一点。使用 flexbox 可以让您不指定内容的高度，并且可以自动调整其包含的高度。

演示

这是演示的要点

.container{

  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;

}

html

<div class="container">
  <div class='content'> //you can size this anyway you want
    put anything you want here,
  </div>
</div>