在网格项上自动边距。

与Flexbox类似，在网格项上应用自动边距会使其在两个轴上居中：

.container {
  display: grid;
}
.element {
  margin: auto;
}

有几个技巧可以在div的中心显示内容或图像。有些答案非常好，我也完全同意。

CSS中的绝对水平和垂直居中

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

有10多种技术和示例。现在取决于你喜欢哪一个。

毫无疑问，显示：表格；display：table Cell是一个更好的技巧。

以下是一些好技巧：

技巧1-使用display：table；显示：表格单元

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

货物积载与系固安全操作规则

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

技巧2-通过使用显示：内联块

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

CSS代码

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

技巧3-使用位置：相对；位置：绝对

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

将此类添加到包含要垂直对齐的对象的元素中

您可以使用显示网格并将项目放置在中心：

.容器{宽度：200px；高度：200px；边框：纯红色；显示：栅格；放置项目：中心；}<div class=“container”>Lorem，ipsum dolor。</div>

您可以使用css flexbox。

.推荐文本{高度：500px；填充：1em；显示：柔性；对齐项目：居中；对齐内容：中心；边框：1px实心#b4d2d2；}<div class=“推荐文本”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。Duis aute irure多尔代表在voluptate velit esse cillum dolore eu fugiat nullapariator。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕。</div>

尝试一下，在父div上添加：

display: flex;
align-items: center;