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

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

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

30 回答

最简单的方法是以下 3 lines 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>

回复于 2024-04-27T16:26:19+08:00

2
我刚刚写了这个CSS并了解更多信息，请通过：This article with vertical align anything with just 3 lines of CSS .
```
.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
```
回复于 2024-04-27T16:26:19+08:00
1
下面是我可以构建的最佳全方位解决方案，可以垂直和水平居中固定宽度的内容框 . 它已经过测试，适用于最新版本的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>
```
View A Working Example With Dynamic Content

我内置了一些动态内容来测试灵活性，并且很想知道是否有人发现它有任何问题 . 它也适用于中心覆盖层 - 灯箱，弹出窗口等 .
回复于 2024-04-27T16:26:19+08:00
73
不幸的是 - 但并不奇怪 - 解决方案比人们希望的更复杂 . 还不幸的是，你需要在想要垂直居中的div周围使用额外的div .

对于符合标准的浏览器，如Mozilla，Opera，Safari等，您需要将外部div设置为表格，将内部div设置为表格单元格 - 然后可以垂直居中 . 对于Internet Explorer，您需要将内部div完全放在外部div中，然后将顶部指定为50％ . 以下几页很好地解释了这种技术并提供了一些代码示例：
- Vertical Centering in CSS
- CSS中具有未知高度的垂直居中（兼容Internet Explorer 7）（不再存在）
- Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)（存档文章由Wayback Machine提供）
还有一种使用JavaScript进行垂直居中的技术 . Vertical alignment of content with JavaScript & CSS演示了它 .
回复于 2024-04-27T16:26:19+08:00

131

要将div置于页面中心，check the fiddle link .

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

另一个选择是使用弹性框，check the fiddle link .

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

回复于 2024-04-27T16:26:19+08:00

如果有人只关心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

回复于 2024-04-27T16:26:19+08:00

13
我在列表中看不到一个：
```
.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 （参见Variable Height）
- 推荐设置 overflow: auto 以防止内容溢出（请参阅溢出）
来源：CSS中的绝对水平和垂直居中
回复于 2024-04-27T16:26:19+08:00

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

Flexbox解决方案

Notes
1.父元素被赋予类名 .
2.如果supported browsers需要，请添加flex供应商前缀 .

.verticallyCenter {
  display: flex;
  align-items: center;
}

<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

回复于 2024-04-27T16:26:19+08:00

我认为在不使用flexbox的情况下为所有浏览器提供可靠的解决方案 - “align-items：center;”是display：table和vertical-align：middle;的组合 .

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣演示：https://jsfiddle.net/6m640rpp/

回复于 2024-04-27T16:26:19+08:00

1
就这么做：在 div 添加课程：
```
.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}
```
并阅读this article作为解释 . 注意： Height 是必要的 .
回复于 2024-04-27T16:26:19+08:00
4

以下链接提供了一种简单的方法，只需在CSS中使用3行：

Vertical align anything with just 3 lines of CSS .

致记：塞巴斯蒂安·埃克斯特罗姆 .

我知道这个问题已经有了答案但是我在链接中看到了它的简洁性 .

回复于 2024-04-27T16:26:19+08:00

253

仅垂直居中

如果您不关心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>

另见this Fiddle！

水平和垂直居中

如果要水平和垂直居中，还需要以下内容 .

内部容器：

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

另见this Fiddle！

回复于 2024-04-27T16:26:19+08:00

垂直居中元素的现代方法是使用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>

回复于 2024-04-27T16:26:19+08:00

我这样做了（相应地改变宽度，高度，margin-top和margin-left）：

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

回复于 2024-04-27T16:26:19+08:00

如果你有一个块元素（例如），这个解决方案对我有用 . 我使用颜色使解决方案更清晰 .

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 Code Demo

回复于 2024-04-27T16:26:19+08:00

最简单的解决方案如下：

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
}
.inner-div{
  margin: auto;
  text-align:center;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

回复于 2024-04-27T16:26:19+08:00

这是我找到的最简单的方法，我一直都在使用它（jsFiddle demo here）

感谢CSS Tricks的Chris Coyier为this article .

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

回复于 2024-04-27T16:26:19+08:00

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

这是result

回复于 2024-04-27T16:26:19+08:00

3
经过大量的研究，我终于找到了最终的解决方案 . 它甚至适用于浮动元素 . View Source
```
.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
```
回复于 2024-04-27T16:26:19+08:00

Billbad的答案仅适用于 .inner div的固定宽度 . 通过将属性 text-align: center 添加到 .outer div，此解决方案适用于动态宽度 .

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

回复于 2024-04-27T16:26:19+08:00

2
当我必须回到this issue时，这总是我走的路 .

对于那些不想跳跃的人：
- 将父容器指定为 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>
```
回复于 2024-04-27T16:26:19+08:00

现在，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>

回复于 2024-04-27T16:26:19+08:00

我用这个 . 它适用于Internet Explorer 8及更高版本：

height:268px - for display:table 就像min-height一样 .

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>

回复于 2024-04-27T16:26:19+08:00

1
以下是我的案例，并在Firefox中进行了测试 .
```
#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}
```
div的高度和父亲的身高是动态的 . 我在同一个父元素上存在高于目标元素的其他元素时使用它，其中两个元素都是水平内联的 .
回复于 2024-04-27T16:26:19+08:00

特别是对于具有相对（未知）高度的父div，centering in the unknown解决方案对我来说非常有用 . 本文中有一些非常好的代码示例 .

它在Chrome，Firefox，Opera和Internet Explorer中进行了测试 .

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

回复于 2024-04-27T16:26:19+08:00

使用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;
}

回复于 2024-04-27T16:26:19+08:00

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

30 回答

Flexbox解决方案

CSS

HTML

仅垂直居中

外容器：

内部容器：

内容框：

演示：

水平和垂直居中

内部容器：

内容框：

演示：

相关问题