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

Posted 2021-04-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何为所有浏览器垂直居中div？相关的知识，希望对你有一定的参考价值。

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

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

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

答案

下面是我可以构建的最佳全方位解决方案，可以垂直和水平居中固定宽度，灵活高度的内容盒。它已经过测试，适用于最新版本的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>

另一答案

不幸的是 - 但并不奇怪 - 解决方案比人们希望的更复杂。还不幸的是，你需要在想要垂直居中的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演示了它。

另一答案

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

另一答案

最简单的解决方案如下：

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

另一答案

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

另一答案

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>

另一答案

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

另一答案

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

另一答案

我刚刚写了这个CSS并了解更多，请通过：设置DIV块元素在浏览器页面中垂直居中

在 CSS 中以圆形垂直和水平居中文本（如 iphone 通知徽章）

前端面试CSS系列——DIV垂直水平居中

如何为移动设备“居中”<div>

body高度100%怎么让div在body里面垂直居中

让DIV水平和垂直居中的几种方法