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个回答
111

CSS 3的box-align属性

#outer {
  width: 100%;
  height: 100%;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

现在已经被flexbox所取代，因此不再推荐使用 - 不过，对我来说仍然值得点赞！ - dkellner
88

我通常使用绝对定位来实现：

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

外部 div 不需要任何额外的属性即可正常工作。

如果居中的 div 下面还有其他 div，则此方法可能无法正常工作。 - NoChance
85

最近我需要将一个“隐藏”的div（即display:none;）居中放置在页面上，该div中包含了一个表单。我编写了以下jQuery代码来显示隐藏的div，并更新CSS内容以自动生成表格的宽度并更改边距以使其居中。（显示切换由单击链接触发，但不必要显示此代码。）

注意：我分享这段代码是因为Google将我带到了Stack Overflow的解决方案，并且除了隐藏元素没有任何宽度并且在显示之前无法调整大小/居中之外，其他都可以工作。

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

77

适用于Firefox和Chrome浏览器：

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

对于Internet Explorer、Firefox和Chrome：

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align: 属性对于现代浏览器来说是可选的，但在 Internet Explorer 怪异模式下，它对于支持旧版浏览器非常必要。

text-align实际上在IE快速模式下是必需的，因此如果您不介意添加一些表达式来支持旧版本浏览器，请将其保留在那里。（IE8使用IE8规则和IE7规则都可以不使用text-align，因此可能只有IE6及更早版本需要考虑） - heytools
73

使用：

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

68

如果不想为其中一个元素设置宽度，另一种解决方案是使用CSS 3的transform属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

诀窍在于translateX(-50%)将#inner元素设置为其自身宽度的50％向左。您可以使用相同的技巧进行垂直对齐。

这里有一个Fiddle，展示了水平和垂直对齐。

更多信息请参见Mozilla开发者网络。

5
有时候，人们需要使用厂商前缀来编写CSS样式代码，例如：-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);。这些前缀可以确保你的代码在不同浏览器中都能够正确地渲染出来，并保持一致的效果。 - Skippy le Grand Gourou
57

Chris Coyier 在他的博客上写了一篇优秀的文章，名为“在未知尺寸下居中”。这是多种解决方案的综述。我发布了一个在此问题中没有发布的解决方案。它比Flexbox解决方案具有更好的浏览器支持，并且您不需要使用display: table;，这可能会破坏其他东西。

/* This parent can be any width and height */

#outer {
  text-align: center;
}


/* The ghost, nudged to maintain perfect centering */

#outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}


/* The element to be centered, can
       also be of any width and height */

#inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

54

我最近发现了一种方法：

#outer {
  position: absolute;
  left: 50%;
}

#inner {
  position: relative;
  left: -50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

两个元素的宽度必须相同才能正常工作。

只需为 #inner 设置以下规则：#inner { position:relative; left:50%; transform:translateX(-50%); }。这适用于任何宽度。 - Jose Rui Santos
46
例如，请参阅此链接和下面的片段： 

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

如果一个父元素下有很多子元素，那么你的CSS内容必须像这个 在fiddle上的示例一样。
HTML内容如下：
<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

那么请查看这个在JSFiddle上的示例。

42

仅水平居中

根据我的经验，将以下属性应用于元素是最好的方式来实现水平居中：

容器：

  • 应该有 text-align: center;

内容框：

  • 应该有 display: inline-block;

演示：

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

请参见此Fiddle！

水平和垂直居中

在我的经验中，居中一个盒子的最佳方式是使用一个额外的容器，并应用以下属性以使其同时垂直和水平居中：

外部容器：

  • 应该具有display: table;属性

内部容器：

  • 应该具有display: table-cell;属性
  • 应该具有vertical-align: middle;属性
  • 应该具有text-align: center;属性

内容盒子：

  • 应该具有display: inline-block;属性

Demo：

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.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">
      Center this!
    </div>
  </div>
</div>

请参考this Fiddle！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接