如何在另一个<div>中水平居中<div>？

我怎样才能水平居中使用CSS的另一个<div>一个<div> （如果它甚至可能）？

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

Answer 1

你可以将这个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> 

Answer 2

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

 #outer { width: 100%; text-align: center; } #inner { display: inline-block; } 

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

Answer 3

最好的方法与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属性。

flex ：

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

阅读更多关于集中子元素的信息

• 链接2

• 链接3

• 链接4

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

• 为什么W3C盒子模型考虑得更好？

Answer 4

假设你的div是200px宽：

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

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

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

https://jsfiddle.net/gjvfxxdj/

Answer 5

我已经创build了这个例子来展示如何垂直和水平 align 。

代码基本上是这样的：

 #outer { position: relative; } 

和…

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

即使重新调整屏幕大小 ，它也会保持在center 。

Answer 6

一些海报提到了使用display:box的css3方法

这个语法已经过时了，不应该再使用了[另见这篇文章]所以为了完整起见，这里是使用灵活框布局模块

所以，如果你有简单的标记：

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

Answer 7

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

您可以使用：

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

Answer 8

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

Answer 9

CSS3的box-align属性

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

Answer 10

设置width并将margin-left和margin-right为auto 。 尽pipe如此，这只是水平的 。 如果你想要两种方法，你只需要两种方法。 不要害怕尝试，这不像你会打破任何东西

Answer 11

围绕未知高度和宽度的div

水平和垂直。 适用于现代浏览器（FF，Safari / Webkit，Chrome，IE10，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> 

Answer 12

我最近不得不将一个“隐藏的”div（即display：none;）放置在一个需要以页面为中心的表格中。 我写了下面的jQuery来显示隐藏的div，然后将CSS更新为表格的自动生成宽度，并将边距改为居中。 （显示切换是通过点击一个链接来触发的，但是这个代码并不需要显示。）

注：我分享这个代码，因为谷歌带我到这个堆栈溢出解决scheme和一切都会工作，除了隐藏的元素没有任何宽度，不能调整/居中，直到它们显示之后。

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

Answer 13

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

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

外部div不需要任何额外的财产这个工作。

Answer 14

这是我的答案。

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

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

Answer 15

克里斯·科伊尔（Chris Coyier）在他的博客上写了一篇关于“围绕未知”的精彩文章 。 这是多种解决scheme的综合。 我发布了一个没有发布在这个问题上的东西。 它有更多的浏览器支持，然后flexbox解决scheme，你不使用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; } 

Answer 16

对于Firefox和Chrome：

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

Answer 17

另一种解决方法是使用CSS3 transform属性，而不必为其中一个元素设置宽度。

 #outer { position: relative; } #inner { position: absolute; left: 50%; transform: translateX(-50%); } 

技巧是， translateX(-50%)将#inner元素设置为其自身宽度的左边50％。 你可以使用相同的技巧进行垂直alignment。

这是一个小提琴显示水平和垂直alignment。

有关Mozilla开发者networking的更多信息。

Answer 18

我意识到自己已经很晚了，但这是一个非常受欢迎的问题，最近我发现了一个我在这里没有提到的方法，所以我想我会logging下来。

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

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

Answer 19

例如，请参阅下面的链接和代码片段：

 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 horizentaly. */ line-height: 120px; /* For Text alignment to center verticaly. */ } 

 <div id="outer" style="width:100%;"> <div id="inner">Foo foo</div> </div> 

Answer 20

最简单的方法是：

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

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

Answer 21

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

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

Answer 22

你可以做这样的事情

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

这也将垂直alignment#inner 。 如果你不想要，删除display和vertical-align属性;

Answer 23

居中仅水平

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

容器：

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

Answer 24

那么，我设法find可能适合所有情况的解决scheme，但使用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); }) }); 

Answer 25

这个方法也可以正常工作：

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

对于内部的<div> ，唯一的条件是它的height和width不能大于它的容器的大小。

Answer 26

文本alignment：中心

应用text-align: center将行内内容居中在行框内。 然而，由于内部div有默认width: 100%你必须设置一个特定的宽度或使用下列之一：

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

Answer 27

尝试玩弄

 margin: 0 auto; 

如果您还想将文字居中，请尝试使用：

 text-align: center; 

Answer 28

一个选项存在，我发现每个人都说使用

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

Answer 29

Flex拥有超过97％的浏览器支持覆盖率，并且可能是解决这类问题的最佳途径：

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

Answer 30

如果任何人想要一个JQuery的中心alignment这些div

 $(window).bind("load", function() { var wwidth = $("#outer").width(); var width = $('#inner').width(); $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;"); });