提问



如何使用CSS将<div>水平居中于另一个<div>内(如果可能的话)?




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



您可以将此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>



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




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

#inner {
  display: inline-block;
}

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



CSS 3的最佳方法。[98]


盒子型号:



#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属性。


的Flex :


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


了解有关居中子元素的更多信息





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



  • 为什么W3C盒子模型被认为更好?


最佳参考


假设你的div是200px宽:


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


确保父元素定位,即相对,固定,绝对或粘性。[103]


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


https://jsfiddle.net/gjvfxxdj/[104]

其它参考1


我创建了这个例子来展示如何垂直水平 align[105]


代码基本上是这样的:


#outer {
  position: relative;
}


和...


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


即使你重新调整你的屏幕,它也会保留在center中。

其它参考2


一些海报提到了CSS使用display:box进行中心化的方法。


这种语法已经过时,不应该再使用了。[[另见本文]]。[106]


所以,为了完整起见,这里是使用灵活的盒子布局模块来集中在CSS  3中的最新方式。[107]


所以,如果你有简单的标记,如:


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



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


您可以使用:


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

其它参考3


CSS3的盒子对齐属性[108]


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

其它参考4


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

其它参考5


以未知高度和宽度为中心



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



设置width并将margin-leftmargin-right设置为auto。但是,对于水平而言,这只是 。如果你想要两种方式,那么你就是两种方式。不要害怕尝试;它不像你会破坏任何东西。

其它参考6


我最近不得不将一个隐藏的div(即display:none;)居中,其中有一个表格形式,需要以页面为中心。我写了下面的jQuery来显示隐藏的div&然后将CSS更新为表格的自动生成宽度,并更改边距以使其居中。 (通过单击链接触发显示切换,但此代码无需显示。)


注意:我正在分享这段代码,因为谷歌把我带到了这个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>



我通常这样做的方式是使用绝对位置:


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


外部div不需要任何额外的财产来实现这一点。

其它参考7


对于Firefox和Chrome:




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



这是我的答案。




#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>



Chris Coyier在他的博客上撰写了一篇关于未知中心的精彩文章。这是多个解决方案的综合。我发布了一个没有在这个问题中发布的解决方案。它有更多的浏览器支持然后是flexbox解决方案,而你不使用display: table;可能会破坏其他东西。[109]


/* 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;
}

其它参考8


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


#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}


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


这是一个小提琴显示水平和垂直对齐。[110]


有关Mozilla开发者网络的更多信息。[111]

其它参考9


我意识到我在游戏中已经很晚了,但这是一个非常受欢迎的问题,我最近发现了一种我在这里没有提到过的方法,所以我想我会记录它。


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

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


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

其它参考10


例如,请参阅以下链接和以下代码段:[112]




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>



仅水平居中



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


容器:




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



最简单的方法:




#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>



这是你想要的最短的方式。


的jsfiddle [113]


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

其它参考11


你可以做这样的事情


#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属性;

其它参考12


这个方法也很好用:


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


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

其它参考13


文字对齐:中心



应用 text-align: center 内联内容在行框中居中。但是,由于内部div默认为width: 100%,您必须设置特定宽度或使用以下之一:[114]



  • display: block

  • display: inline

  • display: inline-block





#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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



好吧,我设法找到一个可能适合所有情况的解决方案,但使用JavaScript:[115] [116] [117]


这是结构:


<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);
  })
});

其它参考14


试着玩


margin: 0 auto;


如果您也希望将文本居中,请尝试使用:


text-align: center;

其它参考15


我找到了一个选项:


每个人都说使用:


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 */
}

其它参考16


Flex拥有超过97%的浏览器支持覆盖率,可能是在几行内解决这些问题的最佳方法:


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