如何将<div>水平居中


4283

如何使用CSS <div>在另一个文件中水平居中<div>

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

13
在这些很棒的答案中,我只想强调一下,您必须给“ #inner”一个“宽度”,否则它将是“ 100%”,并且您无法确定它是否已经居中。
乔尼

Joma Tech带我来到这里
Barbu Barbu

@Barbu Barbu:以什么方式?在什么情况下?
彼得·莫滕森

Answers:


4724

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

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

当然,您不必将设置width50%。任何小于包含宽度的宽度<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>


12
对于垂直居中,我通常使用“ line-height”(line-height == height)。这很简单,也很不错,但是只能处理一行内容的文本:)
Nicolas Guillaume 2010年

98
您必须在HTML页面上使用!DOCTYPE标记才能使其在IE上正常运行。
法比奥(Fabio)2012年

15
注意,可能有必要添加“ float:none;”。为#inner。
Mert Mertce 2013年

15
还将上边距和下边距设置为0,这是无关的。margin-left: auto; margin-right: auto我认为最好放。
Emmanuel Touzery 2014年

13
不一定margin:0 automargin: <whatever_vertical_margin_you_need> auto第二个可能是水平边距。
YakovL

1243

如果您不想在内部设置固定宽度,则div可以执行以下操作:

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

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

这样就使内部div成为可以以居中的内联元素text-align


13
@SabaAhang将会是正确的语法,float: none;可能只是因为#inner继承了CSS float中一个leftright其他地方的a才需要。
Doug McLean 2015年

7
这是一个很好的解决方案。请记住,inner将继承,text-align因此您可能需要将inner的值设置text-aligninitial或其他值。
pmoleri

我认为是一个不错的解决方案
simon,

381

最好的方法是使用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%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

弹性

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

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

这也解释了为什么盒模型是最好的办法


25
在实施此解决方案之前,请确保先阅读此答案
cimmanon

4
到目前为止,Safari仍然需要-webkitflexbox(display: -webkit-flex;-webkit-align-items: center;-webkit-justify-content: center;)的标志
Joseph Hansen

我一直认为使用很多代码是不好的做法,例如,我将这个代码放在div中心:display:table; 保证金:自动;简单容易
simon

是我还是此代码片段未居中
Mike

在2020年,我们可以使用flexbox caniuse.com/#feat=flexbox
tonygatta

251

假设您的div宽度为200像素:

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

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

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

https://jsfiddle.net/gjvfxxdj/

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


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

原理仍然相同;将物品放在中间并补偿宽度。


我不喜欢这种解决方案,因为当内部元素对于屏幕而言太宽时,您将无法水平滚动整个元素。保证金:0自动效果更好。
阿洛索2015年

左边距:自动;右边距:自动;将块级元素
居中

大多数块级元素的默认宽度为auto,它将填充屏幕上的可用区域。只是居中,将其放置在与左对齐相同的位置。如果希望它在视觉上居中,则应设置宽度(或最大宽度,尽管Internet Explorer 6和更早版本不支持此宽度,而IE 7仅在标准模式下支持它)。
killscreen

228

我创建了这个示例,以展示如何垂直水平放置 align

代码基本上是这样的:

#outer {
  position: relative;
}

和...

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

center即使您调整屏幕大小,它也将保持不变


12
对于这种方法+1,我正准备回答。请注意,必须在希望水平居中的元素上声明宽度(如果垂直居中,则声明高度)。这是一个全面的解释:codepen.io/shshaw/full/gEiDt。垂直和/或水平对中元素的一种功能更广泛且得到广泛支持的方法。
stvnrynlds 2013年

6
您不能在div内使用填充,但如果要给错觉,请使用相同颜色的边框。
Squirrl 2014年

我认为,
要使

212

一些张贴者提到CSS 3居中使用方式display:box

该语法已过时,不应再使用。[另请参阅此帖子]

因此,为了完整起见,这是使用“ 灵活框式布局”模块在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 */
}

如果您需要支持使用旧版Flexbox语法的旧版浏览器,那么这里是一个不错的地方。


“语法已过时”是什么意思,不赞成使用吗?
Konga Raju 2013年

6
Flexbox规范经历了3个主要修订。最新的草案来自2012年9月,正式弃用了之前的所有草案。但是,浏览器支持参差不齐(尤其是旧的Android浏览器):stackoverflow.com/questions/15662578/…–
cimmanon

贾斯汀·波利(Justin Poliey)的版本不适用于Chrome浏览器。
维尔恩·詹森

不是“正当内容:中心”;用于垂直对齐和“ align-items:居中”;水平对齐?
Wouter Vanherck

3
@WouterVanherck取决于flex-direction值。如果它是“行”(默认),则justify-content: center; 用于水平对齐(如我在答案中提到的);如果它是“列”,则justify-content: center;用于垂直对齐。
Danield


97

将未知高度和宽度的div居中

水平和垂直。它可以与相当现代的浏览器(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>

CodepenJSBin上进一步修补


89

如果不给定宽度,则无法居中。否则,默认情况下,它将占据整个水平空间。


49
如果您不知道宽度?说是因为内容是动态的?
gman

最大宽度?那个怎么样?

1
我使用width: fit-content;margin: 0 auto。我认为这可以使用未知的宽度。
瑞克


88

设置widthmargin-left,将和设置margin-rightauto。不过,这仅适用于水平。如果您想同时使用两种方式,则只需同时进行。不要害怕尝试;不要害怕。并不是您会破坏任何东西。


62

我最近不得不display:none;居中放置一个“隐藏”的div(即),该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>


59

我通常的方法是使用绝对位置:

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

外部div不需要任何其他属性即可工作。


如果您的其他div低于居中的div,则此方法可能无效。
NoChance

54

对于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 Quirks Mode中,对于旧版浏览器的支持,此属性是必需的。


5
不需要text-align属性。完全没有必要。
Touhid Rahman

文本对齐实际上是使其在IE Quicks模式下工作所必需的,因此,如果您不介意添加一些表达式来支持较旧的浏览器,则请保留它。(带有IE8规则的IE8和IE7规则都可以在不使用文本对齐的情况下工作,因此可能是所关注的IE6和更早版本)
heytools

52

采用:

#outerDiv {
  width: 500px;
}

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


47

另一个无需设置元素宽度的解决方案是使用CSS 3 transform属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

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

这是显示水平和垂直对齐的小提琴

有关更多信息,请参见Mozilla开发人员网络


2
一个人可能也需要供应商前缀:-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 2015年

45

克里斯·科耶尔(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;
}

39

我最近找到了一种方法:

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

#inner {
    position: relative;
    left: -50%;
}

两个元素必须具有相同的宽度才能正常运行。


只需将此规则设置为#inner#inner { position:relative; left:50%; transform:translateX(-50%); }。这适用于任何宽度。
Jose Rui Santos

33

例如,请参见此链接和下面的代码段:

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>

然后看小提琴上的这个例子


28

仅水平居中

以我的经验,使框水平居中的最佳方法是应用以下属性:

容器:

  • 应该有 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>

另请参阅此小提琴


水平和垂直居中

根据我的经验,居中的盒子最好的办法垂直和水平是使用一个额外的容器,并应用以下属性:

外容器:

  • 应该有 display: table;

内部容器:

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

内容框:

  • 应该有 display: inline-block;

演示:

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

另请参阅此小提琴


27

最简单的方法:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>


1
正如您的提琴一样,#inner必须设置宽度。
Michael Terry

#outer不需要任何东西,width:100%;因为<div>默认情况下总是如此width:100%。而且text-align:center也不是必须的
Mobarak Ali,

27

如果内容的宽度未知,则可以使用以下方法。假设我们具有以下两个元素:

  • .outer - 全屏宽度
  • .inner -未设置宽度(但可以指定最大宽度)

假设元素的计算宽度分别为1000像素和300像素。进行如下:

  1. 包裹.inner.center-helper
  2. .center-helper内联块; 它的大小等于.inner使其变为300像素宽。
  3. .center-helper相对于其父对象向右推50%;这会将其左侧的像素保持在500像素。外。
  4. .inner相对于其父对象向左推50%;这会将其左侧放置在-150像素wrt处。中心助手,这表示其左侧为500-150 = 350像素wrt。外。
  5. 将溢出设置.outer为隐藏以防止水平滚动条。

演示:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>


26

你可以做这样的事情

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

这也将#inner垂直对齐。如果不想,请删除displayvertical-align属性。


25

这是您最想得到的。

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

3
垂直居中。
Michael Terry

22

文字对齐:居中

应用text-align: center内联内容在行框中居中。但是,由于默认情况下,内部div具有width: 100%宽度,因此您必须设置特定的宽度或使用以下之一:


保证金:0自动

使用margin: 0 auto是另一种选择,它更适合于较旧的浏览器兼容性。与一起使用display: table


弹性盒

display: flex行为类似于块元素,并根据flexbox模型布置其内容。它适用于justify-content: center

请注意: Flexbox与大多数浏览器兼容,但不是全部。有关完整的最新浏览器兼容性列表,请参见此处


转变

transform: translate使您可以修改CSS视觉格式模型的坐标空间。使用它,可以平移,旋转,缩放和倾斜元素。要水平居中,需要position: absoluteleft: 50%


<center> (已弃用)

标记<center>是的HTML替代text-align: center。它可以在较旧的浏览器和大多数新浏览器上运行,但是由于该功能已过时且已从Web标准中删除,因此不被认为是一种好习惯。


22

您可以使用display: flex外部div并水平居中添加justify-content: center

#outer{
    display: flex;
    justify-content: center;
}

或者,您可以访问w3schools-CSS flex属性以获取更多想法。


21

Flex的浏览器支持覆盖率超过97%,并且可能是在几行之内解决此类问题的最佳方法:

#outer {
  display: flex;
  justify-content: center;
}

21

好吧,我设法找到了可能适合所有情况的解决方案,但是使用了JavaScript:

结构如下:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

这是JavaScript片段:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

如果要以响应方式使用它,可以添加以下内容:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

21

此方法也可以正常工作:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

对于inner <div>,唯一的条件是heightwidth不得大于其容器的。


19

我发现存在一个选择:

大家都说要用:

margin: auto 0;

但是还有另一种选择。为父div设置此属性。它随时随地都能完美运行:

text-align: center;

看,孩子去中心。

最后是CSS:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

文本对齐工作,用于在其容器中进行文本对齐,而不是使其容器与父对象对齐。
Lalit Kumar Maurya 2013年

我测试了一下,我将孩子设置为居中问题,当您有一个孩子,更多次margin:0自动字体答案时,必须这样做,但是,文本对齐居中,对于父对象,使该孩子成为居中对象,即使它们是element和不是文字,请测试并看看会发生什么
Pnsadeghy 2013年

仅使文本居中对齐。这时您是正确的,但是当您编写包含宽度和颜色不同的子代的容器css时,代码将无法工作。再次测试!!!!
Lalit Kumar Maurya 2013年

看到这个例子jsfiddle.net/uCdPK/2,告诉我你怎么看!
Lalit Kumar Maurya 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.