logo标签列表

如何水平居中一个元素？

htmlcssalignmentcentering
5066

如何使用CSS将一个<div>水平居中于另一个<div>中？

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
37
在那些很棒的答案中，我只想强调你必须给 "#inner" 设置一个 "width" 属性，否则它会默认为 "100%"，这样你就无法确定它是否已经居中了。 - Jony
1
display:flex; 是最容易记住的（Chrome 在 DevTools 中提供指南），并支持在两个轴上居中。 - Akshay K Nair
135个回答
5508

使用 flexbox 很容易使 div 水平和垂直居中。

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

要使 div 垂直居中对齐，请使用属性 align-items: center。

其他解决方案

您可以将此CSS应用于内部的 <div>：

#inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将width设置为50％。任何小于包含的<div>的宽度都可以。 margin：0 auto是实际居中的原因。
如果您的目标是Internet Explorer 8（及更高版本），最好使用以下内容：
#inner {
  display: table;
  margin: 0 auto;
}

这将使内部元素水平居中，而且不需要设置特定的width。

示例见此处：

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

23
你还将上下边距设置为0，这与此无关。我认为更好的方法是将 margin-left: auto; margin-right: auto。 - Emmanuel Touzery
1
为了支持移动浏览器，我不建议使用 width: 50%。建议使用类似 max-width: 300px 的方式。 - rybo111
19
不一定是 margin:0 auto，它可以是 margin: <你需要的任何垂直边距> auto，第二个参数是水平方向上的边距。 - YakovL
2
被投票最多并不一定是最好的解决方案。做到这一点的最佳方法是使用div和span标签的组合，块级CSS属性和跨浏览器的inline-block，以及文本居中将完成简单的边距。 - amachree tamunoemi
1
因为“input”是内联元素，必须通过“text-align: center”进行居中对齐。 - Simon Logic
显示剩余6条评论
1407

如果您不想在内部的 div 上设置固定宽度，可以尝试以下方法：

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

这将使内部的 div 成为一个内联元素，可以使用 text-align 居中。

18
@SabaAhang 正确的语法应该是 float: none;。这可能只是因为 #inner 在您的CSS中从其他地方继承了 left 或 right 的 float。 - Doug McLean
11
这是一个不错的解决方案。只需记住，内部元素会继承text-align属性，因此您可能需要将内部元素的text-align设置为initial或其他值。 - pmoleri
452

最佳方法是使用CSS3。

旧的盒模型（已弃用）

display：box及其属性box-pack，box-align，box-orient，box-direction等已被flexbox替代。虽然它们可能仍然有效，但不建议在生产中使用。

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

根据您的可用性，您还可以使用box-orient，box-flex，box-direction属性。 使用Flexbox的现代盒模型。
#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

了解如何使子元素居中

这就是说明为什么盒模型是最佳方法的原因：

7
目前，Safari 仍需要使用 -webkit 标志来实现 flexbox 布局 (display: -webkit-flex; 和 -webkit-align-items: center; 和 -webkit-justify-content: center;)。 - Joseph Hansen
我一直认为使用大量的代码是不好的实践，例如使用以下代码来居中我的div： display: table; margin: auto; 简单易行。 - simon
305

#centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}
<div id="outer" style="width:200px">
  <div id="centered">Foo foo</div>
</div>

确保父元素定位，即相对定位、固定定位、绝对定位或粘性定位。

如果您不知道div的宽度，可以使用transform:translateX(-50%);代替负边距。

使用CSS calc()，代码可以变得更加简单：


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

原则仍然相同：将项目放在中间并补偿宽度。
我不喜欢这个解决方案，因为当内部元素过宽以至于超出屏幕时，你无法水平滚动整个元素。使用margin: 0 auto效果更好。 - Aloso
margin-left: auto; margin-right: auto; 可以使块级元素居中。 - bananaforscale
大多数块级元素的默认宽度为auto，这会填充屏幕上可用的区域。仅仅居中会将其放置在左对齐的相同位置。如果您希望它在视觉上居中，您应该设置一个宽度（或最大宽度，尽管Internet Explorer 6及更早版本不支持此功能，而IE 7仅在标准模式下支持此功能）。 - bananaforscale
275
我已经创建了this example来展示如何垂直和水平对齐。
代码基本上就是这样的： 

#outer {
  position: relative;
}


/* and */

#inner {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

即使您调整屏幕大小，它也将保持在中心。

18
我赞同使用这种方法，我本来也打算用它来回答。请注意，您必须为要水平居中（垂直居中）的元素声明一个宽度（高度）。这是一个全面的解释：http://codepen.io/shshaw/full/gEiDt。这是一种更具通用性和广泛支持的方法，可用于垂直和/或水平居中元素。 - stvnrynlds
9
您不能在 div 内部使用填充，但如果想要产生视觉效果，可以使用相同颜色的边框来实现。 - Squirrl
258

一些帖子中提到使用display:box的CSS 3方法进行居中。

这种语法已经过时，不应再使用。[另请参见此文章]

因此，为了完整起见，这里介绍使用Flexbox布局模块在CSS 3中进行居中的最新方法。

如果您拥有像这样简单的标记：

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

如果你想在盒子中央放置项目，这是你需要在父元素（.box）上添加的内容：

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}


.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

如果您需要支持使用旧版语法的旧浏览器来使用flexbox，则可以查看这里。

“语法过时”是什么意思，它已经被弃用了吗？ - kongaraju
9
Flexbox规范经历了3次主要修订，最新的草案来自2012年9月，正式废止了所有以前的草案。然而，浏览器支持不太可靠（尤其是旧版Android浏览器）：https://dev59.com/emUo5IYBdhLWcg3w7TCT - cimmanon
“justify-content: center;” 不是用于垂直对齐，而是“align-items: center;” 用于水平对齐，对吗？ - Wouter Vanherck
7
这段话的意思是：这要取决于 flex-direction 的值。如果它是“row”（默认值），那么justify-content: center;是用来水平居中对齐的（就像我在回答中提到的那样）。如果它是“column”，那么justify-content: center;是用来垂直居中对齐的。 - Danield
172
如果您不想设置固定宽度，也不想有额外的边距，请在元素中添加display: inline-block。
您可以使用： 

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

我也用过这个，但我从未遇到过 display: table;。它是做什么的？ - Matt Cremeens
157

如何居中一个宽高未知的div

水平方向和垂直方向都可以。该方法适用于现代浏览器（Firefox，Safari/WebKit，Chrome，Internet Explorer 10和Opera等）。

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

可以在Codepen 或者 JSBin 上进一步尝试调整。

3
这是唯一一个能够完美居中并在 div 内容被修改后仍保持居中的方法。 - Phani Rithvij
这是一个不错的技巧，但有一个小细节需要注意。如果元素具有内联内容，其宽度超过父元素宽度的50％，则从“左侧”偏移的额外50％将推断出父元素的宽度，将内容分成下一行以避免溢出。但是可以通过在居中的元素中设置“white-space”属性为“nowrap”来保持内容内联。在此JSFiddle中尝试一下。 - Felypp Oliveira
121

将width设置为auto，然后将margin-left和margin-right都设置为auto。这只对水平方向生效，如果您想在垂直方向也居中，需要同时进行上述步骤。不要害怕尝试；就算出现错误也不会破坏任何东西。

118
如果没有给它一个宽度，它就无法居中。否则，默认情况下，它会占据整个水平空间。
53
如果您不知道宽度怎么办？是因为内容是动态的吗？ - gman
最大宽度？那个怎么样？ - user9016207
9
我使用 width: fit-content; 和 margin: 0 auto。我认为这可以适用于未知宽度的情况。 - Rick
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接