在父元素上使用display:grid并将margin:auto设置为居中元素即可:

请看下面的片段:

html,身体{ 宽度:100%; 高度:100%; 保证金:0; 填充:0; ｝ .container { 显示:网格; 高度:90%; 背景颜色:蓝色; ｝ .content { 保证金:汽车; 颜色:白色; ｝ < div class = "容器" > <div class="content"> cented div here</div> < / div >

最好和最灵活的方式

这个演示的主要技巧是，在元素从上到下的正常流中，因此margin-top: auto被设置为零。然而，绝对定位元素对于自由空间的分布具有相同的作用，并且类似地可以在指定的顶部和底部垂直居中(在IE7中不起作用)。

这个技巧适用于任何大小的div。

div { 宽度:100 px; 身高:100 px; 背景颜色:红色; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 保证金:汽车; ｝ < div > < / div >

使用Flex-box在我看来:

#{母公司 显示:flex; justify-content:中心; 对齐项目:中心; ｝ < div id = "父" > <div id="child">Hello World!< / div > < / div >

您可以看到，只有三个CSS属性可以用于将子元素垂直和水平居中。显示:flex;通过激活Flex-box display来完成主要部分，justify-content: center;将子元素垂直居中并对齐-items: Center;水平居中。为了看到最好的结果，我只添加了一些额外的样式:

#{母公司 显示:flex; justify-content:中心; 对齐项目:中心; 身高:500 px; 宽度:500 px; 背景:黄色; ｝ #孩子{ 宽度:100 px; 身高:100 px; 背景:银色; ｝ < div id = "父" > <div id="child">Hello World!< / div > < / div >

如果你想了解更多关于Flex-box的知识，你可以访问W3Schools, MDN或CSS-Tricks获取更多信息。

请使用以下CSS属性水平和垂直居中对齐元素。这对我来说很有效。

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}

这里还有一个方法(防弹)，利用“display:table”规则:

标记

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

CSS:

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}

虽然我太晚了，但这很简单。页面中心总是向左50%，顶部50%。减去div width和height的50%设置左右边距。希望它适用于所有地方

身体{ 背景:# EEE; ｝ .center-div { 位置:绝对的; 宽度:200 px; 高度:60 px; 左:50%; margin-left: -100 px; 上图:50%; margin-top: -30 px; 背景:# CCC; 颜色:# 000; text-align:中心; ｝ < div class = " center-div”> <h3>这是中心div</h3> < / div >