题 如何为所有浏览器垂直居中div?


我想中心一个 div 垂直使用CSS。我不想要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持。

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

我怎样才能集中精力? div 在所有主流浏览器中垂直放置,包括Internet Explorer 6?


1101
2017-12-28 12:57


起源


可能重复 如何在div中垂直居中具有可变高度的内容? - ripper234
@MarcoDemaio不要让人不断皱眉 tables 在这里布局? - Chud37
@ Chud37:这取决于你要做什么,布局表通常不是多功能的,很长一段时间输入代码,用css你可以很容易地将2 cols布局改成3/4/5 sols布局等。但在这种情况下是不同的,使用几十个css提示和技巧完成这样一个简单的任务,可以用一个完美的跨浏览器表完成,就像试图通过窗口而不是使用门进入你的房子。 - Marco Demaio
这个问题的最佳答案可以在这里找到 stackoverflow.com/a/13075912/5651 - jessegavin
只需看到这个答案,垂直对齐其他div中的div。 垂直对齐Div - Lalit Kumar


答案:


下面是我可以建立的最佳全方位解决方案,垂直和水平居中固定宽度, 灵活的高度 内容框。它已经过测试,适用于最新版本的Firefox,Opera,Chrome和Safari。

.outer {
  display: table;
  position: absolute;
  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>

查看动态内容的工作示例

我内置了一些动态内容来测试灵活性,并且很想知道是否有人发现它有任何问题。它也适用于中心覆盖层 - 灯箱,弹出窗口等。


1134
2018-05-31 03:13



当内部div是一个灵活的高度时工作得很好。我在Chrome和IE7中对它进行了测试,没有外部div完全定位,也很有用。 - Sabrina Leggett
这似乎是唯一不需要任何硬编码高度的解决方案。 - Martijn
width: /*whatever width you want*/;,除了水平居中之外的一切。 :s - Bentley4
jsfiddle.net/44oa3Ls6 - Hermann Ingjaldsson
几乎在2017年,谁会想到表格是以未知尺寸为中心的元素的最佳解决方案。而且你不必担心臭名昭着的 模糊的边界bug 在Chrome中。谢谢! - Saul Fautley


我在列表中看不到一个:

.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 防止内容溢出(请参阅溢出)

资源: CSS中的绝对水平和垂直居中


245
2017-08-13 03:08



这对我有用,但出于某种原因,我需要在chrome中有固定的宽度和高度 - Ryan Knell
谢谢。我需要一个修复,我不需要计算px高度或宽度,这非常有效。 - GFoley83
很好的解决方案,特别是因为您不需要父div - Luca Steeb
如果高度不固定,这会拉伸,除此之外:好的解决方案 - Bart Burg
如果您的宽度和高度不是100%,请使用 margin: auto; - Charles L.


最简单的方法如下 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>


164
2017-12-17 18:30



注意:如果外部div的高度设置为“min-height:170px”,则无法正常工作 - Bart Burg
干扰z-index - ripper234
如果内容有效,则不起作用 float。 - kolobok
什么时候不起作用 height 外在的 div 是 100%。然后才适用 position: absolute;。 - Arch Linux Tux


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

这里是 结果


126
2017-12-28 15:15



谢谢!!!为我工作。你介意解释一下你是怎么想出来的吗? - Dao Lam
这是一个老技巧...前50%和上边距负内部div高度的一半 - Manatax
假设你有一个固定的div高度。 div可以改变高度时不起作用。 - Andre Figueiredo
我编制了一份有用的所有方法列表。jsfiddle.net/k6ShD/4 - Muhammad Umer


这是我找到的最简单的方法,我一直都在使用它 (这里有jsFiddle演示

感谢来自CSS Tricks的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>

支持从IE8开始。


73
2018-02-20 21:05



如果所有其他解决方案都失败了 - 那么无论如何都会有效。我喜欢它。 +1提及Chris Coyier并在此发布! - Daniel Ziegler


经过大量的研究,我终于找到了最终的解决方案。它甚至适用于浮动元素。 查看来源 

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

49
2018-05-19 12:04



如果您记住容器元素必须具有隐式或显式高度,这确实很有效。 jsfiddle.net/14kt53un  对于那些相对较新的CSS来说,这是一个小问题。 - Martyn Shutt
在所有答案中,这是最简单的!我希望别人也能看到你的答案!谢谢!顺便一提, 50% 为我工作(不是 -50%) - The Codesee
这只适用于 position:absolute 为了我。 - Panama Jack


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


31
2017-08-13 04:06



仅适用于固定高度... - Armel Larcier
@ArmelLarcier,不,它 作品 相对高度也。 - user
50%的高度是固定的。它与内容无关,而是父母。 - Armel Larcier
@ArmelLarcier那是不对的。相对单位是百分比 %, ems和 rem秒。绝对值或固定值是像素或点。你所指的是“它只适用于声明的高度”。但是,尽管Moes描述的这种方法确实需要一个高度,但当你以相对单位声明它时,百分比是最好的,无论DIV在垂直扩展以适应其内容的中心DIV中有多少内容。这就是这种方法的美妙之处。另一个好处是这个方法适用于IE8 / 9/10,以防有人仍然需要支持这些浏览器。 - Ricardo Zea
@ArmelLarcier一切都很好。是不是错了兄弟。尝试一下: codepen.io/shshaw/pen/gEiDt  - 在绿色框中添加段落;]。当然,它使用Modernizr来完成效果,但总而言之它是​​可行的。我也看到了你的答案和CSS-Tricks.com帖子,但是这个方法并没有让我高兴,它使用了额外的标记而且CSS太冗长了。我认为最好的解决方案是使用flexbox或者 transform: translate(-50%, -50%); 技术。对于IE8,我只是让它顶部/中心对齐并继续前进。 - Ricardo Zea


现在,flexbox解决方案对于现代浏览器来说是一种非常简单的方式,因此我建议您使用:

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


31
2017-12-15 13:08



这应该在列表上更高 - Peter Berg
为我工作没有身高:100%;谢谢 - Sameera R.
如果你有一个 navbar,你可以使用调整高度 height: calc(100% - 55px) 或者你的高度 navbar 是。 - Adrian
非常有帮助,谢谢。 - slorenzo
我还必须从身体上移除边距/填充物 - Ben


Flexbox解决方案

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

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


24
2018-03-30 01:30



注意 justify-content: center 将水平居中项目 - Peter Berg