如何将水平 table 单元格及其内容居中居中

Question

我在此处 How to center horizontal table-cell 最初提出的问题的基础上稍作修改。

基本上，DIV 需要像现在这样居中，但是，我还需要将单元格中的所有内容垂直对齐居中。

将 vertical-align: middle; 更改为 .column 没有任何作用。如果我将 .column 的 display: inline-block; 更改为 display: table-cell，它将在中间对齐内容，但是 .column DIV 不再居中并且宽度都被破坏（目前所有均匀设置为 25%）。在父项上设置 margin:auto; 或文本对齐不会执行任何操作。

几天来我一直在运行解决这个问题。感谢您的帮助。

/* Setting the container to be a table with maximum width and height */
#container {
 display: table;
 height: 100%;
 width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */

.section {
 display: table-row;
 min-height: 1px;
}

/* We need one extra container, setting it to full width */
.columns-container {
 display: table-cell;
 height: 100%;
 width:100%;
 text-align: center;
}
/* Creating columns */
.column {
    display: inline-block; 
 vertical-align: middle;
 min-height: 150px;
 width: 25%;
 text-align: left;
}
#a {
 background-color: pink;
}
#b {
 background-color: lightgreen;
}
#c {
 background-color: lightblue;
}

<div id="container">
  <div class="section">
    <div class="columns-container">
      <div class="column" id="a"> Contents A </div>
      <div class="column" id="b"> Contents B </div>
      <div class="column" id="c"> Contents C </div>
    </div>
  </div>
</div>

Answer 1

您可以像下面那样做，它使用 CSS3 转换，请参阅内联块上的 browser support details. And be aware of the white spaces 内容。

JsFiddle demo

.container {
    text-align: center;
    margin: 0 auto;
}
.column {
    display: inline-block;
    width: 150px;
    height: 150px;
}
.column > div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }

<div class="container">
    <div class="column" id="a"><div>Contents A</div></div>
    <div class="column" id="b"><div>Contents B</div></div>
    <div class="column" id="c"><div>Contents C</div></div>
</div>

Answer 2

将 .column 的 line-height 设置为元素的 height 是第一步；所以：line-height:150px 垂直对齐内容。
然后，只需将您在 .column 上设置的 text-align:left 样式声明编辑为 text-align:center 即可完成本例中的垂直对齐。
这是 fiddle:
http://jsfiddle.net/jalbertbowdenii/t2xgL3rm/

如何将水平 table 单元格及其内容居中居中

How to center horizontal table-cell and content inside it in the middle

html

css

vertical-alignment