将div垂直居中在另一个div内

我想要中心一个div被添加到另一个div中。

<div id="outerDiv"> <div id="innerDiv"> </div> </div>

这是我目前使用的CSS。

  #outerDiv{ width: 500px; height: 500px; position:relative; } #innerDiv{ width: 284px; height: 290px; position:absolute; top: 50%; left:50%; margin-top: -147px; margin-left: -144px; }

正如你所看到的，我现在使用的方法取决于innerDiv宽度和高度的innerDiv 。如果宽度/高度改变，我将不得不修改margin-top和margin-left是否有任何通用的解决scheme，我可以使用innerDiv中心总是不pipe它的大小？

我发现使用margin:auto可以将innerDiv横向排列在中间，但纵向排列中间呢？

TL;博士

垂直alignment中间的作品，但是你将不得不在你的父元素上使用table-cell ，而在子节点上使用inline-block 。

这个解决scheme不能在IE6和7中工作。
你们是更安全的方式。
但是，既然你用CSS3和HTML5标记你的问题，我想你不介意使用一个现代的解决scheme。

经典的解决scheme（表格布局）

这是我原来的答案。它仍然正常工作，是最广泛支持的解决scheme。表格布局会影响你的渲染性能，所以我build议你使用更现代的解决scheme之一。

这是一个例子

经testing：

FF3.5 +
FF4 +
Safari 5+
Chrome 11+
IE9 +

HTML

 <div class="cn"><div class="inner">your content</div></div>

CSS

 .cn { display: table-cell; width: 500px; height: 500px; vertical-align: middle; text-align: center; } .inner { display: inline-block; width: 200px; height: 200px; }

现代解决scheme（转换）

由于现在转换得到了很好的支持，所以有一个更简单的方法。

CSS

 .cn { position: relative; width: 500px; height: 500px; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; }

演示

♥我最喜爱的现代解决scheme（flexbox）

我开始越来越多地使用flexbox，现在它也是很好的支持它是迄今为止最简单的方法。

CSS

 .cn { display: flex; justify-content: center; align-items: center; }

演示

更多的例子和可能性：比较一个页面上的所有方法

实现这种水平和垂直居中的另一种方式是：

 .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

（参考）

另一种方法是使用变换翻译

外部分部必须将其position设置为relative或fixed position ，内部分部必须将其position设置为absolute ， top和left 50%并应用transform: translate(-50%, -50%) 。

 div.cn { position: relative; width: 200px; height: 200px; background: gray; text-align: center; } div.inner { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: red; }

 <div class="cn"> <div class="inner"> test </div> </div>

垂直alignment任何只有3行的CSS

HTML

 <div class="parent-of-element"> <div class="element"> <p>Hello</p> </div> </div>

简单

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

CSS

 .parent-of-element { position: relative; height: 500px; /* or height: 73.61% */ /* or height: 35vh */ /* or height: ANY HEIGHT */ } .element { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

根据shouldiprefix，这是唯一你需要的前缀

只要元素的父元素具有高度或者某些内容展开了其垂直大小，您也可以使用％作为元素的“高度”属性的值。

不要把自己与难以编写和难以维护的CSS捆绑在一起（这也需要仔细的跨浏览器validation！），我发现放弃CSS和使用简单的HTML 1.0就好多了：

 <table id="outerDiv" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="middle" id="innerDiv"> </td> </tr> </table>

这完成了原始的海报想要的一切，而且是强大和可维护的。

我个人比较喜欢使用隐藏的伪元素跨越外部容器的整个高度，并垂直alignment与其他内容的技巧。克里斯·科伊尔（Chris Coyier）在这项技术上有一篇不错的文 http://css-tricks.com/centering-in-the-unknown/这个的巨大优势是可扩展性。; 您不必知道内容的高度，也不必担心内容的增长/缩小。这个解决scheme缩放:)。

这里有一个你需要的所有CSS的小提琴和一个工作的例子。 http://jsfiddle.net/m5sLze0d/

 .center:before { content: ""; /* Adding Extra Space Above Element */ display: inline-block; height: 100%; margin-right: -0.3em; vertical-align: middle; } .center_element { display:inline-block; float:none; vertical-align:middle; white-space:normal; text-align:left; }

自从一年以来，我一直在使用以下解决scheme，它也适用于IE 7和8。

 <style> .outer { font-size: 0; width: 400px; height: 400px; background: orange; text-align: center; display: inline-block; } .outer .emptyDiv { height: 100%; background: orange; visibility: collapse; } .outer .inner { padding: 10px; background: red; font: bold 12px Arial; } .verticalCenter { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; } </style> <div class="outer"> <div class="emptyDiv verticalCenter"></div> <div class="inner verticalCenter"> <p>Line 1</p> <p>Line 2</p> </div> </div>

如果在阅读上面给出的奇妙答案后仍然不明白。

这里有两个简单的例子，你可以如何实现它。

使用display：table-cell

 .wrapper { display: table-cell; vertical-align: middle; text-align: center; width: 400px; height: 300px; border: 1px solid #555; } .container { display: inline-block; text-align: left; padding: 20px; border: 1px solid #cd0000; }

 <div class="wrapper"> <div class="container"> Center align a div using "<strong>display: table-cell</strong>" </div> </div>

在这里input图像描述 100％的作品

 .div1{ height: 300px; background: red; width: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .div2{ background: green; height: 100px; width: 100%; } <div class="div1"> <div class="div2"> sdfd </div> </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

当你的height没有设置（自动）; 你可以给内部div一些填充（顶部和底部），使其垂直居中：

 <div> <div style="padding-top:20px;padding-bottom:20px"> <!--content--> </div> </div>

 #outerDiv{ width: 500px; height: 500px; position:relative; background:grey; display:flex; justify-content:center; align-items:center; } #innerDiv{ background:cyan; width: 284px; height: 290px; }

 <div id="outerDiv"> <div id="innerDiv">Inner Div </div> </div>

对于不指定高度值的innerdiv，没有纯css解决scheme使其垂直居中.a javascript解决scheme可以得到innerdiv的offsetHeight，然后计算style.marginTop。

你可以用一个简单的javascript（jQuery）块来做到这一点。

CSS ：

 #outerDiv{ height:100%; }

Javascript ：

 <script type="text/javascript"> $(document).ready(function () { $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2); }); </script>

尝试像这样alignment内部元素：

 top: 0; bottom: 0; margin: auto; display: table;

而且当然：

 position: absolute;

这对我有用。可以定义外部div的宽度和高度。

这里代码：

 .outer { position: relative; text-align: center; width: 100%; height: 150px; // Any height is allowed, also in %. background: gray; } .outer > div:first-child { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: red; }

 <div class="outer"> <div class="inner"> Put here your text or div content! </div> </div>

你可以使用flex在CSS中垂直居中放置div;

 #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid #000; margin:0 auto; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } #innerDiv{ width: 284px; height: 290px; border:1px solid #eee; }

第二个是如下;

  #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid #000; } #innerDiv{ max-width: 300px; height: 200px; background-color: blue; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border:1px solid #000; border-radius:4px; }

并由此产生的HTML：

  <div id="outerDiv"> <div id="innerDiv"></div> </div>

小提琴链接< http://jsfiddle.net/dGHFV/2515/ >

尝试这个

  #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid red; } #innerDiv{ width: 284px; height: 290px; position:absolute; top: 0px; left:0px; right:0px; bottom:0px; margin:auto; border:1px solid green; }

这将工作的方式回到IE6！

在IE6上也需要<!DOCTYPE html> ！ [也会强制IE6默认严格模式]。

（当然，盒子着色只是为了演示目的）

  #outer{ width: 205px; height: 205px; margin: auto; text-align: center; } #inner{ text-align: left; vertical-align: middle; width: 120px; height: 120px; display: inline-block; } #center{ height: 100%; width:0px; vertical-align: middle; display: inline-block; } div {background: rgba(0,128,255,.6)}

 <div id=outer> <div id=center></div><div id=inner> The inner DIV </div> </div>

在父元素上alignment文本，在子元素上显示内联块。这将最关键的东西。我相信它被称为“块浮动”。

 <div class="outer"> <div class="inner"> some content </div> </div><!-- end outer --> <style> div.outer{ width: 100%; text-align: center; } div.inner{ display: inline-block; text-align: left } </style>

这也是漂浮的好select，祝你好运！