实际上，您需要两个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中的垂直居中
• CSS中具有未知高度的垂直居中（兼容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:relative或position:absolute。
2. 在子容器上指定固定高度。
3. 在子容器上设置position:absolute和top:50%以将顶部向下移动到父容器的中间。
4. 设置边界顶部：-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{style="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无黑客！）
• 响应百分比和min-/max-
• 居中不管填充（没有框大小！）
• height必须声明（见可变高度）
• 建议设置overflow: auto以防止内容溢出（请参阅溢出）

_{来源：绝对水平和垂直中心在CSS}

将div放在页面的中心，查看小提琴链接。

#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>

Another option is to use flex box, check the fiddle link.

.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的答案仅适用于.inner div的固定宽度。此解决方案通过将属性text-align: center添加到.outer div来实现动态宽度。

.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-对于display:table，它的行为类似于min-高度。

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;}

超文本标记语言：

<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>

将元素垂直居中的现代方法是使用#0。

你需要一个父母来决定身高，一个孩子来居中。

下面的示例将在浏览器中将div居中。重要的是（在我的示例中）将height: 100%设置为body和html，然后将min-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, canalso 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>

垂直和水平中心

超文本标记语言

<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 */}

好好享受！

通过使用transform属性，我们可以轻松地做一个垂直居中的div。

.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在这里会带来一些麻烦，因为它是唯一一个在超文本标记语言/主体元素上严格应用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%;}

超文本标记语言代码：

<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高度的一半。

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

.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，则“位置”相对会破坏样式。然而，“固定”似乎有效，但它显然修复了视口中心的内容

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>

请参阅这个小提琴！

使用CSS Flexboxalign-items属性来实现这一点。

html, body {height: 100%;}
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;}

这个解决方案适用于块元素（例如，

<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>

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;}