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

Question

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

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

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

Answer 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

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

Answer 2

不幸的是 - 但并不奇怪 - 解决方案比人们希望的更复杂。还不幸的是，你需要在想要垂直居中的div周围使用额外的div。

对于符合标准的浏览器，如Mozilla，Opera，Safari等，您需要将外部div设置为表格，将内部div显示为表格单元格 - 然后可以垂直居中。对于Internet Explorer，您需要将内部div完全放在外部div中，然后将顶部指定为50％。以下几页很好地解释了这种技术并提供了一些代码示例：

Vertical Centering in CSS
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible) （不再住）
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)（存档文章由Wayback Machine提供）

还有一种使用JavaScript进行垂直居中的技术。 Vertical alignment of content with JavaScript & CSS演示了它。

Answer 3

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

Answer 4

最简单的解决方案如下：

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

Answer 5

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

Answer 6

Centering only vertically

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

Centering horizontally and vertically

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

内部容器：

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

Answer 7

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

相关：Center a Image

Answer 8

当我不得不回到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>

Answer 9

我刚刚写了这个CSS并了解更多，请通过：This article with vertical align anything with just 3 lines of CSS。

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

Answer 10

比尔巴德的答案只适用于.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>

Answer 11

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

Vertical align anything with just 3 lines of CSS。

致记：SebastianEkström。

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

Answer 12

我在列表中看不到一个：

.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以防止内容溢出（请参阅溢出）

资料来源：Absolute Horizontal And Vertical Centering In CSS

Answer 13

没有回答浏览器兼容性问题，但也提到了新的网格和不那么新的Flexbox功能。

格

来自：Mozilla - Grid Documentation - Align Div Vertically

浏览器支持：Grid Browser Support

CSS：

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML：

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox的

浏览器支持：Flexbox Browser Support

CSS：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Answer 14

使用transform的三行代码几乎适用于现代浏览器和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（令人惊讶地）渲染了这些框而不需要填充

Answer 15

我认为在不使用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>

‣Demo：https://jsfiddle.net/6m640rpp/

Answer 16

我这样做了（相应地改变宽度，高度，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>

Answer 17

特别是对于具有相对（未知）高度的父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>

Answer 18

CSS网格

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

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

Answer 19

我最近发现了一个技巧：你需要使用top 50%然后你做一个translateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Answer 20

对于新来者，请尝试

display: flex;
align-items: center;
justify-content: center;

Answer 21

我发现这个最有用..它提供了最准确的'H'布局，并且非常易于理解。

此标记的好处是您可以在一个地方定义内容大小 - >“PageContent”。页面背景的颜色及其水平边距在其对应的div中定义。

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

这里用CSS分隔：

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}

Answer 22

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

Answer 23

最简单的方法是以下3行CSS：

1）位置：相对;

2）top：50％;

3）转换：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>

Answer 24

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

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

Answer 25

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

Answer 26

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

Answer 27

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

感谢来自CSS Tricks的Chris Coyier为this article。

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

Answer 28

经过大量的研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。 View Source

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

Answer 29

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

Answer 30

Flexbox solution

笔记 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>

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

问题描述投票：1261回答：43

43个回答

Centering only vertically

外容器：

内部容器：

内容框：

演示：

Centering horizontally and vertically

内部容器：

内容框：

演示：

CSS

HTML

CSS网格

Flexbox solution

最新问题

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

问题描述 投票：1261回答：43

43个回答

Centering only vertically

外容器：

内部容器：

内容框：

演示：

Centering horizontally and vertically

内部容器：

内容框：

演示：

CSS

HTML

CSS网格

Flexbox solution

最新问题

问题描述投票：1261回答：43