1366

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

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

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

— 布拉克·埃德姆（Burak Erdem）
source

25

@MarcoDemaio人们tables在这里布局时经常会皱眉吗？

— Chud37

14

@ Chud37：这取决于您要做的事情，用于布局的表通常不是通用的，并且输入代码的时间很长，使用CSS可以轻松地将2 cols布局更改为3/4/5 sols布局等。但是在这种情况下不同的是，使用数十个css提示和技巧来完成如此简单的任务，可以使用完美的跨浏览器表来完成，这就像尝试通过窗户进入房屋而不是使用门一样。

— Marco Demaio 2013年

如果人们不关心较旧的浏览器支持，请访问：davidwalsh.name/css-vertical-center

— KarolisŠarapnickis2014年

1

css-vertical-center.com中存在一些具有浏览器兼容性信息的解决方案

— EscapeNetscape

2

这有很多方法可以做到css-tricks.com/centering-css-complete-guide

— Michael Yurin

1374

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

展开摘要

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

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

— 比尔巴德
source

如果没有“绝对”外部DIV，则页面上的任何内容将向下推整个块。这使其更独立于其他页面内容。

— Billbad

9

.outer {position:absolute;width:100%;height:100%}不必要，它们只是在这里进行演示。我们需要的是display:table，如果有人像我一样感到困惑。

— gfaceless 2015年

我注意到，这需要99％来避免滚动条。更重要的是，该工程仅在第一个两个div，说保持.outer和middle明白地忽略.inner和它的风格。我不知道的要点是什么margin-left，margin-right将其设置为auto，因为它不会使元素水平居中？

— user10089632

删除width: 100%;和添加margin: 0 auto也.outer允许可变宽度。

— 洛可可式

@ user10089632不，这不是宽度或高度的问题，而是位置。top: 0; left 0;丢失，至少在默认设置为1的Chrome中丢失。

— MichałWoliński'18年

280

我在清单上看不到的另一个：

.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中的绝对水平和垂直居中}

— 伊塞拉
source

7

这对我有用，但是出于某种原因，我需要在Chrome中设置固定的宽度和高度

— Ryan Knell，2014年

1

谢谢。我需要一个不需要计算px高度或宽度的修补程序，并且此方法运行得很好。

— GFoley83

8

很好的解决方案，尤其是因为您不需要父div

— Luca Steeb

1

如果高度不固定，则会拉伸一下

— Bart Burg

如果宽度和高度都不是100％，请使用margin: auto;

— Charles L.

253

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

1）职位：相对；

2）最高：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>

展开摘要

— DrupalFever
source

4

注意：如果将外部div的高度设置为“最小高度：170像素”，则无法正常工作

— Bart Burg

3

干扰Z-index

— ripper234 '16

4

当height外部div是时不起作用100%。然后仅适用于position: absolute;。

— Arch Linux Tux

1

我首先在其他地方找到了该解决方案，但是对这个特别的答案-webkit-transform特别赞扬，特别是提到了变体，我需要使它在phantomjs中起作用...结束了数小时的苦苦挣扎，谢谢！

— drmrbrewer 18'Oct

2

这是最好的答案。这非常简单，甚至可以回溯到IE9上所有现有工作和功能的最少量，甚至没有人使用过。让这个家伙更多投票吧！

— 尼克·斯蒂尔

136

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

展开摘要

这是结果

— 瓦迪姆·奥夫钦尼科夫（Vadim Ovchinnikov）
source

4

这是一个老把戏...顶部50％，顶部边距为内div高度的一半

— -Manatax

34

假设您的div高度固定。当div可以更改高度时不起作用。

— Andre Figueiredo

116

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

展开摘要

— Santosh Khalse
source

1

如果您有一个navbar，则可以使用height: calc(100% - 55px)或任何高度来调整高度navbar。

— 阿德里安

我还必须从身体除去边距/填充

— 奔

与搭配使用良好float。谢谢。

— 阿米尔·沙巴尼

请注意，这在“较新的较旧”移动safari浏览器上可能会产生奇怪的效果。推荐使用的，而不是高度的.container类柔性基础

— 九魔术的

78

编辑2020：仅在需要支持IE8之类的旧浏览器时才使用此功能（您应拒绝这样做）。如果没有，请使用flexbox。

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

感谢CSS Tricks的Chris Coyier 撰写本文。

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。

— Armel Larcier
source

拒绝对旧浏览器的支持，对我而言，解决方案不是flexbox，而是网格系统。对于我来说，一个容器中的中心内容有点烦人，当它的高度变得太小时，需要显示滚动条，而居中的内容则用其他所有方法失去了滚动区域。在容器中，我只使用：{display：grid; align-items：居中; }希望这对某人有帮助。

— tomasofen

63

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

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

— aku
source

4

只要您记得容器元素必须具有隐式或显式的高度，该方法就可以很好地工作。jsfiddle.net/14kt53un 对于那些刚接触 CSS的人来说，这是一个小技巧。

— 马丁·舒特

6

在所有答案中，这是最简单的！我希望其他人也能看到您的答案！谢谢！顺便说一句，50%为我工作（不是-50%）

— The Codesee '17

那太不可思议了。经过数小时的搜索，这个为我工作了。我敢肯定为什么要使用translateY（50％），但是它起作用了。就我而言，父级是由AEM Forms Engine创建的，我只能控制某些子级元素。

— tarekahf

41

Flexbox解决方案

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

展开摘要

— 雷吉·平克汉姆（Reggie Pinkham）
source

3

注意 justify-content: center也将使项目水平居中

— Peter Berg

36

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

展开摘要

— 书呆子
source

3

@ArmelLarcier那是不对的。相关单位是百分比%，emS和rem秒。绝对值或固定值是像素或点。您指的是“它仅在声明的高度下工作”。但是，尽管Moes所描述的此方法确实需要高度，但是以相对单位声明时，百分比是最好的，无论居中的DIV中有多少内容，DIV都会垂直扩展以适合其内容。这就是这种方法的优点。另一个好处是，如果有人仍然需要支持这些浏览器，则此方法可在IE8 / 9/10中使用。

— Ricardo Zea

@ricardozea我并不是要顽固地打球，而是说居中的div会垂直扩展，而保持居中的垂直是错误的。尝试一下。我知道当我说高度必须“固定”时，这不是正确的词。它确实是相对于其父级的。无论如何，我认为Chris Coyer的方法更有意义，请参阅我的答案stackoverflow.com/a/21919578/1491212它与IE8兼容，并且可以在没有指定尺寸的元素上工作。

— Armel Larcier

1

@ArmelLarcier一切都很好。没错的兄弟。尝试：codepen.io/shshaw/pen/gEiDt-将段落添加到绿色框中；]。当然，它使用Modernizr来实现效果，但总的来说是可行的。我也看到了您的答案和CSS-Tricks.com帖子，但是该方法并不令我满意，它使用了额外的标记，并且CSS过于冗长。我认为最好的解决方案是使用flexbox或该transform: translate(-50%, -50%);技术。对于IE8，我只是将其顶部/中央对齐并继续前进。

— 里卡多·泽

1

@ricardozea您链接到的codepen使用“ display：table”方法和额外的标记，因此我并不感到惊讶。无论如何，请为您的最后一句话+1。

— Armel Larcier 2015年

23

最简单的解决方案如下：

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

展开摘要

— 瓦尔沙（Varsha Dhadge）
source

2

确实是最简单的方法：)虽然，我不得不将样式设置为外层div，而不是主体。

— baburao

21

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

— SID
source

20

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

— 勇敢的人
source

Android <4.4不支持align-items: center;！

— 安德烈·费德勒

实际上，它确实支持align-items：center; caniuse.com/#search=align-items

— t.mikael.d

@ t.mikael.d您可能想仔细看看那个桌子。对于Android <4.4，它指出“仅支持旧的flexbox规范，不支持包装”。

— 内森·奥斯曼

15

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

展开摘要

— 马尔韦恩
source

14

仅垂直居中

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

展开摘要

另请参阅此小提琴！

— 约翰·斯莱格斯
source

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>

展开摘要

CSS网格

body, html { margin: 0; }

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

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

展开摘要

— 安迪·霍夫曼
source

5

对于新来者，请尝试

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

— 乌斯曼一世
source

1

请添加一个堆栈片段，以显示此CSS代码如何垂直对齐div。

— 异端猴子

这也 <div style="display:flex"><div style="margin:auto">Inner</div></div>

— 可行

我遇到了关于对齐项目和证明内容合理的解释。必读：stackoverflow.com/questions/42613359/...

— 奥斯曼我

4

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>

展开摘要

— 茹文
source

有趣！我正在使用几乎相同的技术！-> stackoverflow.com/questions/396145/…–

— 约翰·斯莱格斯

4

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

— 曼达
source

3

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

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

图片来源：SebastianEkström。

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

— Hicaro
source

3

没有回答浏览器的兼容性问题，还提到了新的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;

— ctekk
source

3

我认为无需使用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/

— 马丁·万特克
source

2

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

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

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

— Netuddki
source

仅当您知道尝试居中的DIV的宽度/高度时，这才很好。这不是问题要问的问题

— egr103

2

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

— 马亨德拉丽雅
source

2

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

展开摘要

— 茹文
source

2

只需做：在您的上添加课程div：

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

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

— 安舒尔
source

2

我最近发现了一个窍门：您需要使用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>

展开摘要

— Melchia
source

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

Flexbox解决方案

仅垂直居中

外容器：

内部容器：

内容框：

演示：

水平和垂直居中

内部容器：

内容框：

演示：

CSS网格

的CSS

的HTML