可以通过两种方式实现

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

OR

使用flex

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

对齐项目：居中；使内容垂直居中

对齐内容：中心；使内容水平居中

居中是CSS最困难的方面之一。

这些方法本身通常不难理解。相反，这更多是因为有很多方法可以将事情集中起来。

您使用的方法可能会有所不同，这取决于您试图居中的HTML元素，或者是水平居中还是垂直居中。

水平居中

水平对中元件通常比垂直对中元件更容易。下面是一些常见的元素，您可能希望水平居中，以及不同的方法。

使用CSS文本居中属性居中文本

要使文本或链接水平居中，只需使用文本对齐属性和值中心：

HTML

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Center horizontally*/
  text-align: center;
}

使用CSS边距自动居中分隔

使用值为0的速记边距属性，自动将块级元素（如div）水平居中：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center horizontally*/
  margin: 0 auto;
}

使用Flexbox水平居中跳水

Flexbox是在页面上居中的最现代的方式，它使设计响应式布局比以前容易得多。然而，它在一些传统浏览器（如Internet Explorer）中并不完全受支持。

要使用Flexbox水平居中元素，只需将display：flex和justify content：center应用于父元素：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Center child horizontally*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

垂直居中

如果没有像Flexbox这样的现代方法，将元素垂直居中可能是一件很麻烦的事。在这里，我们将介绍一些较旧的方法，首先垂直居中，然后向您展示如何使用Flexbox实现这一点。

如何使用CSS绝对定位和负边距使Div垂直居中

在很长一段时间里，这是垂直居中的常用方法。对于此方法，必须知道要居中的元素的高度。

首先，将父元素的position属性设置为relative。

然后，对于子元素，将position属性设置为absolute，并将top设置为50%：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
}

但这实际上只是将子元素的顶部边缘垂直居中。

要使子元素真正居中，请将margin-top属性设置为-（子元素高度的一半）：

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* Half this element's height */
}

使用变换和平移使Div垂直居中

如果您不知道要居中的元素的高度（或者即使您知道），这个方法是一个很好的技巧。

该方法与上述负边距方法非常相似。将父元素的位置属性设置为相对。

对于子元素，将position属性设置为absolute，并将top设置为50%。现在，不要使用负边距来真正居中子元素，只需使用transform:translate（0，-50%）：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

请注意，translate（0，-50%）是translateX（0）和translateY（-50%）的简写。您还可以编写transform:translateY（-50%）以垂直居中子元素。

垂直和水平居中

使用CSS绝对定位和负边距使Div垂直和水平居中

这与上述垂直居中元素的方法非常相似。和上次一样，您必须知道要居中的元素的宽度和高度。

将父元素的位置属性设置为相对。

然后将孩子的位置属性设置为绝对，顶部设置为50%，左侧设置为50%。这只会使子元素的左上角垂直和水平居中。

要使子元素真正居中，请将负上边距设置为子元素高度的一半，将负左边距设置为子元素宽度的一半：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* Apply negative top and left margins to truly center the element */
}

最简单的方法是以下三行CSS：

1） 位置：相对；

2） 顶部：50%；

3） 变换：translateY（-50%）；

以下是一个示例：

外部配电盘{高度：170px；宽度：300px；背景色：浅灰色；}中间分隔符{位置：相对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；}<div class='outer-div'><div class='middle-div'>测试文本</div></div>

我这样做了（相应地改变宽度、高度、顶部边距和左侧边距）：

.wrapper {
    width: 960px;
    height: 590px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -295px;
    margin-left: -480px;
}

<div class="wrapper"> -- Content -- </div>

以下是我的案例，并在Firefox中进行了测试。

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

div的高度和父对象的高度是动态的。当同一父元素上有高于目标元素的其他元素时，我会使用它，因为这两个元素都位于水平内联位置。

实现这一点有多种方法。

使用CSS的flex属性。

解决方案#1.父级{宽度：400px；高度：200px；背景：蓝色；显示：柔性；对齐项目：居中；对齐内容：中心；}.儿童{宽度：75px；高度：75px；背景：黄色；}<div class=“parent”><div class=“child”></div></div>

或使用display：flex；边距：自动；

解决方案#2.父级{宽度：400px；高度：200px；背景：蓝色；显示：柔性；}.儿童{宽度：75px；高度：75px；背景：黄色；边距：自动；}<div class=“parent”><div class=“child”></div></div>

显示文本中心

解决方案#3.父级{宽度：400px；高度：200px；背景：黄色；显示：柔性；对齐项目：居中；对齐内容：中心；}<div class=“parent”>中心</div>

使用百分比（%）高度和宽度。

解决方案#4.父级{位置：绝对；高度：100%；宽度：100%；背景：蓝色；显示：柔性；对齐项目：居中；对齐内容：中心；}.儿童{宽度：75px；高度：75px；背景：黄色；}<div class=“parent”><div class=“child”></div></div>