如何为所有浏览器垂直居中div？
Bur*_*dem 1310 css cross-browser alignment vertical-alignment centering
我想div用CSS垂直居中.我不想要表或JavaScript,只需要纯CSS.我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持.
<body>
<div>Div to be aligned vertically</div>
</body>
如何div在所有主流浏览器(包括Internet Explorer 6)中垂直居中？
Bil*_*bad 1329
下面是我可以构建的最佳全方位解决方案,可以垂直和水平居中固定宽度,灵活高度的内容盒.它已经过测试,适用于最新版本的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>我内置了一些动态内容来测试灵活性,并且很想知道是否有人发现它有任何问题.它也适用于中心覆盖层 - 灯箱,弹出窗口等.
- `.outer {position:absolute; width:100%; height:100%}`不是必需的,它们只是为了演示.我们所需要的只是`display:table`,如果有人像我一样困惑. (6认同)
Yis*_*ela 269
我在列表中看不到一个:
.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以防止内容溢出(请参阅溢出)
- 这对我有用,但出于某种原因,我需要在chrome中有固定的宽度和高度 (7认同)
- 很好的解决方案,特别是因为您不需要父div (7认同)
Dru*_*ver 231
最简单的方法是以下3行 CSS:
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.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的高度设置为"min-height:170px",则无法正常工作 (3认同)
- 如果内容为“ float”，则无效。 (3认同)
- 当``div`的`height`是'100%`时,它不起作用.然后只适用于`position:absolute;`. (3认同)
- 干扰z-index (2认同)
- 这是最好的答案。这非常简单，在所有东西上都使用了最少的现有工作和功能，早在 IE9 中就没有人使用了。让这家伙多点赞吧！ (2认同)
小智 134
实际上你需要两个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可以改变高度时不起作用. (34认同)
- 我编制了一份有用的所有方法的列表.http://jsfiddle.net/k6ShD/4/ (7认同)
- 这是一个老技巧...前50%和上边距负内部div高度的一半 (4认同)
San*_*lse 95
现在,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>- 如果你有一个 `navbar`，你可以使用 `height: calc(100% - 55px)` 或任何你的 `navbar` 的高度来调整高度。 (2认同)
Arm*_*ier 74
这是我找到的最简单的方法,我一直都在使用它(这里是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>支持从IE8开始.
yma*_*kux 59
经过大量的研究,我终于找到了最终的解决方案.它甚至适用于浮动元素.查看来源
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
- 在所有答案中,这是最简单的!我希望别人也能看到你的答案!谢谢!顺便说一下,'50%'对我有效(不是'-50%`) (5认同)
- 如果您记住容器元素必须具有隐式或显式高度,这确实很有效.https://jsfiddle.net/14kt53un/对那些相对较新的CSS的人来说是一个小问题. (2认同)
Moe*_*oes 35
要将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>另一个选择是使用弹性框,检查小提琴链接.
.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>- @ArmelLarcier那是不对的.相对单位是百分比`%`,`em`s和`rem`s.绝对值或固定值是像素或点.你所指的是"它只适用于声明的高度".然而,尽管Moes描述的这种方法确实需要高度,但当你以相对单位声明它时,百分比是最好的,无论DIV在垂直扩展以适合其内容的中心DIV中有多少内容.这就是这种方法的美妙之处.另一个好处是这个方法适用于IE8/9/10,以防有人仍然需要支持这些浏览器. (3认同)
Reg*_*ham 30
Flexbox解决方案
注释
1.父元素被赋予类名.
2.如果您的支持的浏览器需要,请添加flex供应商前缀.
.verticallyCenter {
display: flex;
align-items: center;
}<div class="verticallyCenter" style="height:200px; background:beige">
<div>Element centered vertically</div>
</div>- 注意 `justify-content: center` 也会将项目水平居中 (6认同)
小智 21
不幸的是 - 但并不奇怪 - 解决方案比人们希望的更复杂.还不幸的是,你需要在想要垂直居中的div周围使用额外的div.
对于符合标准的浏览器,如Mozilla,Opera,Safari等,您需要将外部div设置为表格,将内部div设置为表格单元格 - 然后可以垂直居中.对于Internet Explorer,需要放置内的div 绝对内部的外层div,然后指定顶为50% .以下几页很好地解释了这种技术并提供了一些代码示例:
- CSS中的垂直居中
CSS中具有未知高度的垂直居中(兼容Internet Explorer 7)(不再存在)- CSS中具有未知高度的垂直居中(兼容Internet Explorer 7)(归档文章由Wayback Machine提供)
还有一种使用JavaScript进行垂直居中的技术.使用JavaScript和CSS对内容进行垂直对齐可以证明这一点.
Var*_*dge 21
最简单的解决方案如下:
.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>- 确实最容易的:)但是,我必须将样式设置为外部div而不是body. (2认同)
bra*_*ick 20
如果有人只关心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
Mar*_*lln 15
使用垂直居中元素的现代方法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>Joh*_*ers 14
仅垂直居中
如果您不关心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>另见这个小提琴!
- 这个答案与此类似:http://stackoverflow.com/a/24570521/363573. (2认同)
ant*_*ove 13
.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>相关:居中图像
Dev*_*Dev 12
可以通过两种方式完成
body{
left: 50%;
top:50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
或者
使用弹性
body {
height:100%
width:100%
display: flex;
justify-content: center;
align-items: center;
}
align-items:center;使内容垂直居中
justify-content: center;使内容水平居中
小智 10
当我不得不回到这个问题时,这总是我要去的地方.
对于那些不想跳跃的人:
- 将父容器指定为
position:relative或position:absolute. - 在子容器上指定固定高度.
- 设置
position:absolute并top:50%在子容器上将顶部向下移动到父级的中间. - 设置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>
我刚刚写了这篇CSS并了解更多信息,请仔细阅读:本文垂直对齐任何只有3行CSS的内容.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
使用CSS的flex属性。
.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;
.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>显示文字中心
.parent {
width: 400px;
height: 200px;
background: yellow;
display: flex;
align-items: center;
justify-content:center;
}<div class="parent">Center</div>使用百分比（％）的高度和宽度。
.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> 对于新人，请尝试：
display: flex;
align-items: center;
justify-content: center;
- 请添加一个 [Stack Snippet](https://meta.stackoverflow.com/q/358992/215552)，显示此 CSS 代码如何**垂直**对齐 `div`。 (2认同)
这三行代码 usingtransform实际上适用于现代浏览器和 Internet Explorer：
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
我添加这个答案是因为我发现这个答案的前一个版本有些不完整（而且 Stack Overflow 不允许我简单地评论）。
如果当前 div 位于正文中并且没有容器 div，则 'position' 相对会弄乱样式。然而“固定”似乎有效，但它显然修复了视口中心的内容
此外，我使用这种样式将一些叠加 div 居中，并发现在 Mozilla 中，这个转换后的 div 中的所有元素都失去了它们的底部边框。可能是渲染问题。但是只向其中一些添加最小的填充就可以正确地渲染它。Chrome 和 Internet Explorer（出人意料地）在不需要任何填充的情况下渲染了这些框
CSS 网格
body, html { margin: 0; }
body {
display: grid;
min-height: 100vh;
align-items: center;
}<div>Div to be aligned vertically</div>| 归档时间： |
|
| 查看次数： |
1410202 次 |
| 最近记录： |