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

CSS

理查德Green

2020-03-13

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

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

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

第1487篇《如何在所有浏览器的div中垂直居中？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共25个回答

斯丁飞云 2020.03.13

只需执行以下操作：将课程添加到您的div：

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

并阅读本文以获得解释。注意：Height是必要的。

Stafan泡芙 2020.03.13

特别是对于具有相对（未知）高度的父级div，在未知解决方案中居中对我很有用。本文中有一些非常不错的代码示例。

它已经在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>

梅十三 2020.03.13

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

小次郎 2020.03.13

我这样做（相应地更改宽度，高度，边距顶部和边距左侧）：

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

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

蛋蛋L 2020.03.13

没有回答浏览器的兼容性问题，还提到了新的Grid和不是那么新的Flexbox功能。

格网

来自：Mozilla-网格文档-垂直对齐Div

浏览器支持：网格浏览器支持

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浏览器支持

CSS：

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

JinJin卡卡西小胖 2020.03.13

我认为无需使用flexbox即可为所有浏览器提供可靠的解决方案-“ align-items：center;” 是显示：表格和垂直对齐：中间；的组合。

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

小小凯 2020.03.13

CSS网格

body, html { margin: 0; }

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

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

AStafan 2020.03.13

对于新来者，请尝试

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

前端Pro 2020.03.13

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

用3行CSS垂直对齐任何内容。

致谢：塞巴斯蒂安·埃克斯特罗姆（SebastianEkström）。

我知道这个问题已经有了答案，但是为了简单起见，我在链接中看到了实用程序。

Itachi阳光 2020.03.13

使用以下三行代码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（令人惊讶地）无需填充就可以显示这些框

猿前端猿 2020.03.13

我只是编写了此CSS，并且要了解更多信息，请仔细阅读：本文仅用3行CSS即可使所有内容垂直对齐。

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

Stafan泡芙 2020.03.13

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

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

Mandy斯丁 2020.03.13

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

西门逆天 2020.03.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>

仅垂直居中

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

另请参阅此小提琴！

斯丁A 2020.03.13

Flexbox解决方案

注意事项
1.给父元素一个类名。
2.如果支持的浏览器需要，请添加弹性厂商前缀。

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

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

逆天西里 2020.03.13

不幸的是-但并不奇怪-解决方案比人们希望的复杂得多。同样不幸的是，您需要在要垂直居中的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的垂直对齐说明了这一点。

卡卡西三千曜飞云 2020.03.13

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

A小卤蛋Pro 2020.03.13

最简单的解决方案如下：

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

蛋蛋L西里 2020.03.13

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

另一个选择是使用flex框，检查小提琴链接。

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

小小卡卡西 2020.03.13

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

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

路易凯 2020.03.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必须声明（请参见可变高度）
建议的设置，overflow: auto以防止内容溢出（请参阅溢出）

_{来源：CSS中的绝对水平和垂直居中}

AStafan 2020.03.13

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

这是结果

蛋蛋L西里 2020.03.13

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

查看带有动态内容的工作示例

我构建了一些动态内容来测试灵活性，并且很想知道是否有人看到它的任何问题。它也应适用于居中的叠加层-灯箱，弹出窗口等。

樱泡芙小哥 2020.03.13

现在，对于现代浏览器来说，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>

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android