题 如何在另一个
中水平居中


我怎样才能水平居中 <div> 在另一个 <div> 使用CSS(如果它甚至可能)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


3636
2018-06-09 08:34


起源


在那些伟大的答案中,我只想强调你必须给“#inner”一个“宽度”,否则它将是“100%”,你无法判断它是否已经居中。 - Jony


答案:


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

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

当然,你不必设置 width 至 50%。任何宽度小于含有 <div> 将工作。该 margin: 0 auto 实际的中心是什么。

如果您的目标是IE8 +,那么最好将其改为:

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中,并且无需设置特定的工作 width

这里的工作示例:

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


4097



对于垂直居中,我通常使用“line-height”(line-height == height)。这很简单,但它只使用一行内容文本:) - Nicolas Guillaume
您必须在html页面上使用!DOCTYPE标记才能使其在IE上运行良好。 - Fabio
请注意,可能需要添加“float:none;”对于#inner。 - Mert Mertce
您还将顶部和底部边距设置为0,这是不相关的。更好的推杆 margin-left: auto; margin-right: auto 我认为。 - Emmanuel Touzery
不必要 margin:0 auto: 有可能 margin: <whatever_vertical_margin_you_need> auto 第二是水平边际。 - YakovL


如果您不想在内部设置固定宽度 div 你可以这样做:

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

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

这使内心 div 进入可以居中的内联元素 text-align


1111



@SabaAhang正确的语法就是这样 float: none; 并且可能只需要因为#inner继承了一个 float 任何一个 left 要么 right 来自CSS的其他地方。 - Doug McLean
这是一个很好的解决方案。请记住,内心会继承 text-align 所以你可能想设置内心 text-align 至 initial 或其他一些价值。 - pmoleri


最好的方法是 CSS 3

盒子型号:

#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%;
}

根据您的可用性,您也可以使用 box-orient, box-flex, box-direction 属性。

柔性

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

阅读有关居中子元素的更多信息

这解释了为什么盒子模型是最好的方法


299



当内部div有浮动时它也适用于我:左; - Tareq
一定要读 这个答案 在您开始实施此解决方案之前。 - cimmanon
Safari,截至目前,仍然需要 -webkit flexbox的标志(display: -webkit-flex; 和 -webkit-align-items: center; 和 -webkit-justify-content: center;) - Joseph Hansen


假设你的div是 200px 宽:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

确保父元素是 定位的 即相对的,固定的,绝对的或粘性的。

如果您不知道div的宽度,可以使用 transform:translateX(-50%); 而不是负边际。

https://jsfiddle.net/gjvfxxdj/


216



这在Safari中不起作用 - cesards
我不喜欢这种解决方案,因为当内部元素对于屏幕而言太宽时,您无法水平滚动整个元素。保证金:0自动效果更好。 - Aloso
为什么你把保证金留下:-100,这是行不通的 - Robert Limanto
我已经读过它是唯一可以在IE6 / 7中使用的方法 - Andy
margin-left:auto; margin-right:auto;以块级元素为中心 - unicodexm


我创造了这个  展示如何 垂直 和 水平  align

代码基本上是这样的:

#outer {
  position: relative;
}

和...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

它会留在 center 即使你 重新大小 你的屏幕。


200



这个方法的+1,我正要回答它。请注意,您必须在要水平居中的元素上声明宽度(如果垂直居中,则为高度)。这是一个全面的解释: codepen.io/shshaw/full/gEiDt。垂直和/或水平对中元素的多功能和广泛支持的方法之一。 - stvnrynlds
你不能在div中使用填充,但如果你想给幻觉使用相同颜色的边框。 - Squirrl
我认为要使用此方法,您需要设置内部div的with和height - Nicolas S.Xu


一些海报提到了CSS 3使用中心的方式 display:box

此语法已过时,不应再使用。 [也可以看看 这个帖子]

所以这里只是为了完整性是使用CSS的中心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语法的旧浏览器 这里的 一个好看的地方。


158



stackoverflow.com/a/10010055/1312610 - ShibinRagh
“语法已过时”是什么意思,它是否已被弃用? - Konga Raju
Flexbox规范经历了3次重大修订。最新的草案是从2012年9月开始的,该草案正式弃用了之前的所有草案。但是,浏览器支持很多(特别是旧的Android浏览器): stackoverflow.com/questions/15662578/... - cimmanon
当Justin Poliey的版本没有时,这适用于Chrome。 - Vern Jensen
@WouterVanherck它取决于 flex-direction 值。如果是'row'(默认值) - 那么 justify-content: center;  是为了水平对齐(就像我在答案中提到的那样)如果它是'列' - 那么 justify-content: center; 用于垂直对齐。 - Danield


如果您不想设置固定宽度而不想要额外的边距,请添加 display: inline-block 你的元素。

您可以使用:

#element {
    display: table;
    margin: 0 auto;
}

120



与display相同的要求:inline-block too(quirksmode.org/css/display.html) - montrealmike
我也用过这个,但我从未遇到过 display: table; 之前。它有什么作用? - Matt Cremeens


CSS3的box-align属性

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

75



一定要读 这个答案 在您开始实施此解决方案之前。 - cimmanon


如果不给它宽度,它就不能居中,否则默认情况下整个水平空间。


74



如果你不知道宽度?说是因为内容是动态的? - gman
最大宽度?那个怎么样? - Will Hoskings


以未知高度和宽度为中心

水平和垂直。它适用于相当现代的浏览器(Firefox,Safari / WebKit,Chrome,Internet Explorer 10,Opera等)

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

进一步修补它 Codepen 或者 JSBin


74