实际上，您需要两个 div 进行垂直居中。包含内容的 div 必须具有宽度和高度。

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* Half of #content height */
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

这是结果。

不幸的是，但并不奇怪，解决方案比人们希望的要复杂得多。同样不幸的是，您需要在要垂直居中的 div 周围使用额外的 div。

对于符合标准的浏览器，如Mozilla、Opera、Safari等，您需要将外部div设置为显示为表格，将内部div设置为显示为表格单元格，然后可以垂直居中。对于 Internet Explorer，您需要将内部 div 绝对定位在外部 div 内，然后将顶部指定为 50%。以下页面很好地解释了这种技术，并提供了一些代码示例：

• CSS 中的垂直居中
• Vertical Centering in CSS with Unknown Height （Internet Explorer 7 兼容） （存档文章由 Wayback Machine 提供）

还有一种使用 JavaScript 进行垂直居中的技术。内容与JavaScript和CSS的垂直对齐证明了这一点。

下面是我可以构建的最佳全方位解决方案，用于垂直和水平居中固定宽度、灵活高度的内容框。它已经过测试，适用于最新版本的 Firefox、Opera、Chrome 和 Safari。

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

查看具有动态内容的工作示例

我内置了一些动态内容来测试灵活性，并想知道是否有人发现它有任何问题。它也应该适用于居中的叠加层——灯箱、弹出窗口等。

当我不得不回到这个问题时，我总是会去的地方。

对于那些不想跳跃的人：

1. 将父容器指定为 或 。position:relativeposition:absolute
2. 在子容器上指定固定高度。
3. 设置 和 以将顶部向下移动到父容器的中间。position:absolutetop:50%
4. 设置 margin-top：-yy，其中 yy 是子容器高度的一半，以偏移项目。

代码中的示例：

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

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

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

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

我发现这个最有用......它提供了最准确的“H”布局，并且非常易于理解。

此标记的好处是，您可以在一个位置定义内容大小 - >“PageContent”。

页面背景的颜色及其水平边距在其相应的 div 中定义。

<div id="PageLayoutConfiguration"
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

    <div id="PageBackground"
         style="display: table-cell; vertical-align: middle;
         background-color: purple;">

        <div id="PageHorizontalMargins"
             style="width: 100%;
             background-color: seashell;">

            <div id="PageContent"
                 style="width: 1200px; height: 620px; margin: 0 auto;
                 background-color: grey;">

                 My content goes here...

            </div>
        </div>
    </div>
</div>

这里将 CSS 分开：

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
}

#PageBackground{
   display: table-cell;
   vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px;
   height: 620px;
   margin: 0 auto;
   background-color: grey;
}

还有一个我在列表中看不到：

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

• 跨浏览器（包括 Internet Explorer 8 - Internet Explorer 10 没有黑客！
• 响应百分比和最小值/最大值
• 无论填充如何，都居中（没有盒子尺寸！
• height必须声明（参见可变高度)
• 防止内容溢出的推荐设置（请参阅溢出）overflow: auto

_{来源： CSS 中的绝对水平和垂直居中}

要使 div 在页面上居中，请检查 fiddle 链接。

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

另一种选择是使用 flex box，检查小提琴链接。

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

另一种选择是使用 CSS 3 转换：

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

编辑 2020：仅当您需要支持 Internet Explorer 8 等旧浏览器时才使用它（您应该拒绝这样做😉）。如果没有，请使用 Flexbox。

这是我找到的最简单的方法，我一直在使用它 （jsFiddle 演示在这里）。

感谢 CSS Tricks 的 Chris Coyier 撰写本文。

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%;
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

从 Internet Explorer 8 开始支持。

如果有人只关心 Internet Explorer 10（及更高版本），请使用 Flexbox：

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}

<div class="parent">
    <div class="centered"></div>
</div>

Flexbox 支持：http://caniuse.com/flexbox

Billbad 的答案仅适用于 div 的固定宽度。 此解决方案通过将属性添加到 div 来处理动态宽度。.innertext-align: center.outer

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

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

我用这个。它适用于 Internet Explorer 8 及更高版本：

height:268px- 对于像 min-height 这样的行为。display:table

CSS：

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML格式：

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

垂直居中元素的现代方法是使用 flexbox。

您需要父母来决定身高，而孩子需要居中。

下面的示例将在浏览器中将 div 居中。重要的是（在我的示例中）设置到，然后设置到容器。height: 100%bodyhtmlmin-height: 100%

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

特别是对于具有相对（未知）高度的父 div，未知解决方案中的居中对我来说效果很好。文章中有一些非常好的代码示例。

它在 Chrome、Firefox、Opera 和 Internet Explorer 中进行了测试。

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

我刚刚找到了另一种适合我的方法：

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS的

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

更多信息

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

1）职位：相对;

2）顶部：50%;

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

下面是一个示例：

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

垂直和水平中心

[HTML全文]

<div id="dialog">Centered Dialog</div>

CSS的

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

享受！

通过使用该属性，我们可以轻松地进行垂直居中的 div。transform

.main-div {
    background: none repeat scroll 0 0 #999;
    font-size: 18px;
    height: 450px;
    max-width: 850px;
    padding: 15px;
}

.vertical-center {
    background: none repeat scroll 0 0 #1FA67A;
    color: #FFFFFF;
    padding: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

<div class="main-div">
    <div class="vertical-center">
        <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
    </div>
</div>

全文请看这里

若要垂直对齐网页（包括 Internet Explorer 6）中的框，可以使用：

1. 条件注释
2. 该物业haslayout
3. display: table-value对于其他人（现在是 Flex）

小提琴

/* Internet Explorer 8 and others */
.main {
  width: 500px;
  margin: auto;
  border: solid;
}
html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
}

<!-- [if lte IE 7]>
<style> /* Should be in the <head> */
    html, body , .ie {
        height: 100%;
        text-align: center;
        white-space: nowrap;
    }
    .ie , .main{
        display: inline; /* Used with zoom in case you take a block element instead an inline element */
        zoom: 1;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }
</style>
<b class="ie"></b>
<!--[endif]-->
<div class="main">
  <p>Fill it up with your content </p>
  <p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>
</div>

实际上，Internet Explorer 7 在这里会带来一些麻烦，因为它是唯一严格适用于 HTML/body 元素的。height: 100%

但是，这是过去和今天，谁还介意旧版本的 Internet Explorer，table/table-cell 很好，display： flex 很有前途，display： grid 总有一天会出现。

另一个现在的例子 通过 flex

html {
  display: flex;
  min-height: 100vh;/* or height */
}

body {
  margin: auto;
}

<div>Div to be aligned vertically</div>

只需这样做：在您的 ：div

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

并阅读这篇文章进行解释。注意：是必要的。Height

这是一个简单的方法，几乎没有代码：

CSS代码：

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

HTML代码：

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

您的文本将位于页面中间！

经过大量的研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源代码

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

最好的办法是：

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150 像素，因为在这种情况下，这是 div 高度的一半。

使用的三行代码实际上适用于现代浏览器和 Internet Explorer：transform

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

我之所以添加这个答案，是因为我发现这个答案的上一个版本有些不完整（Stack Overflow 不允许我简单地发表评论）。

1. 如果当前 div 在正文中并且没有容器 div，则 'position' relative 会弄乱样式。然而，“固定”似乎有效，但它显然修复了视口中心的内容

2. 此外，我使用这种样式将一些叠加 div 居中，发现在 Mozilla 中，这个转换后的 div 中的所有元素都失去了底部边框。可能是渲染问题。但是，仅向其中一些添加最小的填充即可正确呈现它。Chrome 和 Internet Explorer（令人惊讶的是）在没有任何填充的情况下渲染了这些框

声明这个 Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在您的元素中：

.element{
    @include vertical-align();
}

以下内容适用于我的情况，并在Firefox中进行了测试。

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

div 的高度和父级的高度是动态的。当同一父元素上有其他元素高于目标元素时，我使用它，其中两个元素都水平内联放置。

仅垂直居中

如果您不关心 Internet Explorer 6 和 7，则可以使用涉及两个容器的技术。

外容器：

• 应该有display: table;

内容器：

• 应该有display: table-cell;
• 应该有vertical-align: middle;

内容框：

• 应该有display: inline-block;

您可以将所需的任何内容添加到内容框中，而无需关心其宽度或高度！

演示：

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

也看这个小提琴！

水平和垂直居中

如果要在水平和垂直方向上居中，还需要以下内容。

内容器：

• 应该有text-align: center;

内容框：

• 应将水平文本对齐方式重新调整为 例如或 ，除非您希望文本居中text-align: left;text-align: right;

演示：

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

也看这个小提琴！

html, body {
    height: 100%;
    margin: 0;
}

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

这是迄今为止最简单的方法，也适用于非阻塞元素。唯一的缺点是它是 Flexbox，因此，较旧的浏览器将不支持此功能。

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

链接到 CodePen：

http://codepen.io/damianocel/pen/LNOdRp

这里重要的一点是，对于垂直居中，我们需要定义一个父元素（容器），并且 img 的高度必须小于父元素。

此方法不使用任何转换。因此，输出变得模糊没有问题。

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;

这在我的情况下有效（仅在现代浏览器中测试）：

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}

我刚刚写了这个 CSS，要了解更多信息，请仔细阅读：这篇文章垂直对齐任何内容，只需 3 行 CSS。

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

现在，Flexbox解决方案对于现代浏览器来说是一种非常简单的方法，因此我向您推荐以下解决方案：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: green;
}

body,
html {
  height: 100%;
}

<div class="container">
  <div>Div to be aligned vertically</div>
</div>

使用 Flexbox 可以轻松将内容居中。以下代码显示了需要将内容居中的容器的 CSS：

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

这个解决方案对我适用于块元素（例如，<div>）。我使用颜色使解决方案更清晰。

HTML格式：

<main class="skin_orange">
    <p>As you can the the element/box is vertically centered</p>
    <div class="bigBox skin_blue">Blue Box</div>
</main>

CSS：

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

JSFiddle 代码演示

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

相关新闻： 使图像居中

不回答浏览器兼容性，但也提到新的网格和不那么新的 Flexbox 功能。

网 格

发件人：Mozilla - 网格文档 - 垂直对齐 Div

浏览器支持：网格浏览器支持

CSS：

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML格式：

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

弹性盒

浏览器支持：Flexbox 浏览器支持

CSS：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

我认为在不使用 Flexbox 的情况下适用于所有浏览器的可靠解决方案 - “align-items： center;” 是 display： table 和 vertical-align： middle; 的组合。

CSS的

.vertically-center
{
    display: table;

    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

[HTML全文]

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣演示：https://jsfiddle.net/6m640rpp/

最简单的解决方案如下：

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align: center;
  border: 1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

CSS 网格

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

我最近发现了一个技巧：你需要使用 ，然后你做一个.top 50%translateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

对于新人，请尝试：

display: flex;
align-items: center;
justify-content: center;

有多种方法可以实现这一点。

使用 CSS 的 flex 属性。

解决方案#1

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

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

或者使用 display： flex; 和 margin： auto;

解决方案#2

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

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

显示文本中心

解决方案#3

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

使用 percentage（%） 高度和宽度。

解决方案#4

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

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

由于每次我需要垂直居中 div 时，我都会一遍又一遍地在谷歌上搜索它，并且这个答案总是排在第一位，我会把它留给将来的我（因为提供的解决方案都不能很好地满足我的需求）：

因此，如果已经在使用 bootstrap，则可以按如下方式完成：

<div style="min-height: 100vh;" class="align-items-center row">
    <div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well

    //content goes here

    </div>
</div>

.center{
    display: grid;
    place-items: center;
}

它可以通过两种方式完成

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

或

使用 flex

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

align-items:center;使内容垂直居中

justify-content: center;使内容水平居中

我为谁想要分享了简短的版本。

.firstDivision {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.firstDivision .verticalCenter {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

<div class="firstDivision">
  <div class="verticalCenter">
    Text was centered for Vertical.
  </div>
</div>

使用弹性盒：

display: flex;
flex-direction: column;
justify-content: center;
height: 100%;