如何为所有浏览器垂直居中div？
如何为所有浏览器垂直居中div？
我想div用CSS垂直居中。我不想要表或JavaScript，只需要纯CSS。我找到了一些解决方案，但所有这些解决方案都缺少Internet Explorer 6支持。
<body> <div>Div to be aligned vertically</div></body>
如何div在所有主流浏览器（包括Internet Explorer 6）中垂直居中？
白板的微信浏览 950回答 4
4回答
-
智慧大石
下面是我可以构建的最佳全方位解决方案，可以垂直和水平居中固定宽度，灵活高度的内容盒。它已经过测试，适用于最新版本的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>我内置了一些动态内容来测试灵活性，并且很想知道是否有人发现它有任何问题。它也适用于中心覆盖层 - 灯箱，弹出窗口等。 -
拉莫斯之舞
我在列表中看不到一个：.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以防止内容溢出（请参阅溢出） -
元芳怎么了
最简单的方法是以下3行 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> -
守候你守候我
实际上你需要两个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>
随时随地看视频慕课网APP
JavaScript
Html/CSS