如何垂直居中所有浏览器的div？

我想用CSS垂直居中div。 我不想要表或Javascript，但只有纯CSS。 我find了一些解决scheme，但都缺less对Internet Explorer 6的支持。 

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

如何在所有主stream浏览器（包括Internet Explorer 6）中垂直居中div？

下面是我可以build立垂直和水平居中固定宽度， 灵活的高度内容框的最好的全面解决scheme。 经过testing，并为FF，Opera，Chrome和Safari的最新版本工作。

HTML 

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

CSS 

 .outer { display: table; position: absolute; height: 100%; width: 100%; } .middle { display: table-cell; vertical-align: middle; } .inner { margin-left: auto; margin-right: auto; width: /*whatever width you want*/; }

使用dynamic内容查看工作示例

我build立了一些dynamic内容来testing灵活性。 想知道是否有人看到任何问题。 还应该适用于集中叠加 – 灯箱，popup等。

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

 .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; }
  • 跨浏览器（包括IE8-10没有黑客！）
  • 响应百分比和最小/最大 –
  • 无论填充（无框大小！），居中
  • height必须声明（请参阅variables高度 ）
  • 推荐设置overflow: auto防止内容溢出（请参阅溢出）

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

其实你需要两个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>

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

 position: relative; top: 50%; transform: 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>

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

感谢这篇文章的 CSS技巧Chris Coyier。 

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

经过大量的研究，我终于find了最终的解决scheme。 它甚至适用于浮动元素。 查看来源 

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

在一个页面中心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>

Flexbox解决scheme

笔记
1.父元素被赋予类名称。
2.如果支持的浏览器需要，添加灵活的供应商前缀。 

 .verticallyCenter { display: flex; align-items: center; } 
 <div class="verticallyCenter" style="height:200px; background:beige"> <div>Element centered vertically</div> </div>

不幸的是 – 但并不奇怪 – 解决scheme比人们希望的更复杂。 另外不幸的是，你需要在你想要垂直居中的div周围使用额外的div。

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

  • 在CSS中垂直居中
  • 垂直居中与未知高度CSS（ie7兼容） （不再居住）
  • 垂直居中CSS未知高度（ie7兼容） （存档文章礼貌的Wayback机）

还有一种技术可以使用Javascript进行垂直居中。 内容与JavaScript和CSS的垂直alignment显示它。

这个问题已经够老了，所以如果有人只关心IE10 +，可以使用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 。

你需要的是一个父母来决定身高和孩子的中心。

下面的例子将在浏览器中心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>

现在flexbox解决scheme对于现代浏览器来说是非常简单的方法，所以我向你推荐这个 

 .container{ display: flex; align-items: center; justify-content: center; height:100%; } body, html{ height:100%; } 
 <div class="container"> <div>Div to be aligned vertically</div> </div>

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

对于那些不想跳跃的人来说：

  1. 指定父容器作为位置：relative或position：absolute。
  2. 在子容器上指定一个固定的高度。
  3. 设置位置：绝对和顶部：子容器上的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> 
 .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: 50%; transform: translate(0, -50%); /* (x, y) => position */ } .horizontal { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); /* (x, y) => position */ padding: 20px; background-color: grey; } 
 <body> <div class="vertical">Vertically left</div> <div class="horizontal">Horizontal top</div> <div class="center">Vertically Horizontal</div> </body>

只要写这个CSS，并了解更多，请通过： 这articale-垂直alignment任何与只是3行的CSS 

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

Billbad的答案只适用于.inner div的固定宽度。 该解决scheme通过将属性text-align: center到.outer div来适用于dynamic宽度。 

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

下面的链接提供了一个简单的方法，在你的CSS中只用3行：

垂直alignment任何只有3行的CSS 。

致谢 ： SebastianEkström 。

我知道这个问题已经有了答案，但是我在链接中看到了它的简单实用。

我知道答案已经给出了，但是我认为这个链接对所有情况下的中央调整都是有用的： howtocenterincss.com

三行代码使用转换工作几乎在现代浏览器和IE浏览器 

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

我添加这个答案，因为我发现在这个答案的前一个版本中有一些不完整（和stackoverflow不会让我只是评论）。

  1. 如果当前的div在body中并且没有容器div，那么'position'相对就会弄乱了样式。 然而，“固定”似乎工作，但它显然固定在视口中心的内容 位置：相对

  2. 此外，我使用这个样式来定位一些覆盖div，并发现在Mozilla中，这个转换div内的所有元素都失去了底部边界。 可能是渲染问题。 但是，添加一些最小的填充，使其正确。 Chrome和IE（令人惊讶）渲染了这些框，而不需要任何填充 mozilla没有内衬垫与填充mozilla

垂直居中

如果你不关心IE6和IE7，你可以使用一种涉及两个容器的技术。

外部容器：

  • 应该有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>

特别是对于身高相对（未知）的父母亲来说， 在未知的解决scheme中居中对我很有帮助。 文章中有一些非常好的代码示例。

testingChrome，FF，Opera，IE。 

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

这个在我的情况下工作。 在Firefoxtesting。 

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

div的高度和父母的高度是dynamic的。 我在同一个父元素上有其他元素比目标元素更高时使用它，两个元素都是水平内嵌的。

我用这个 适用于IE8 +

height:268px – 用于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>

只要做到这一点：添加类@你的div ： 

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

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

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

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

链接到codepen：

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

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

内容可以通过使用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; }

如果你有一个块元素（例如）这个解决scheme为我工作。 我用这些颜色使解决scheme更清晰。

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代码演示

我做了这个（相应地改变宽度，高度，边距和边距）： 

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

垂直和水平中心

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

请享用！

Interesting Posts

如何显示列表项作为列？

Bootstrap – 内部表的文本alignment类

在Java中alignmentprintf输出

C ++的新操作有没有保证地址返回的一致性？

垂直alignment图像在div中

CSS方式来水平alignment表格

为什么这个内嵌块元素的内容不是垂直alignment的

如何将UIButton的标题设置为左alignment？

CSS：如何垂直alignment“标签”和“input”内的“股利”？

alignmentdiv内的内容