本文共 10888 字，大约阅读时间需要 36 分钟。
我怎么能水平居中一个<div>另一个内<div>使用？
Foo foo
如果您不想设置固定宽度并且不希望有多余的边距，请在您的元素中添加display: inline-block 。
您可以使用：
#element { display: table; margin: 0 auto;} 对于Firefox和Chrome：
Text
对于Internet Explorer，Firefox和Chrome：
Text
text-align:属性对于现代浏览器是可选的，但是对于Internet Explorer Quirks模式来说，对于旧版浏览器的支持是必需的。
您可以将此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; border: 1px solid black; } #outer { border: 1px solid red; width:100% } Foo foo
如果不给定宽度，则不能居中，否则默认情况下它将占据整个水平空间。
设置width ，并将margin-left和margin-right为auto 。 不过，这仅适用于水平 。 如果您想同时使用两种方式，则只需同时进行。 不要害怕尝试；不要害怕。 并不是您会破坏任何东西。
最好的方法是使用 。
#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%; } Foo foo
根据您的可用性，您还可以使用box-orient, box-flex, box-direction属性。
弹性 ：
#outer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;}
这解释了为什么盒模型是最好的方法 ：
我通常的方法是使用绝对位置：
#inner{ left: 0; right: 0; margin-left: auto; margin-right: auto; position: absolute;} 外部div不需要任何其他属性即可工作。
一些张贴者提到使用display:box居中的CSS 3方法。
该语法已过时，不应再使用。 [另请参阅 。
因此，为了完整起见，这里是使用“ 在CSS 3中居中的最新方法。
因此，如果您有简单的标记，例如：
ABC
...并且您想将项目放在框中居中，这是您在父元素（.box）上需要的内容：
.box { display: flex; flex-wrap: wrap; /* Optional. only if you want the items to wrap */ justify-content: center; /* For horizontal */ 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; } ABC
如果您需要支持使用旧版Flexbox语法的旧版浏览器，那么一个不错的地方。
我意识到我已经很晚了，但是这是一个非常受欢迎的问题，最近我发现这里没有提到任何一种方法，因此我想将其记录在案。
#outer { position: absolute; left: 50%;}#inner { position: relative; left: -50%;} 编辑：两个元素必须具有相同的宽度才能正常运行。
这是我的答案。
#outerDiv { width: 500px; } #innerDiv { width: 200px; margin: 0 auto; } Inner Content
我创建了这个以展示如何垂直和水平 align 。
代码基本上是这样的：
#outer { position: relative;} 和...
#inner { margin: auto; position: absolute; left:0; right: 0; top: 0; bottom: 0;} 即使您调整屏幕大小 ，它也将保留在center 。
你可以做这样的事情
#container { display: table; width: ; height: ;}#inner { width: ; display: table-cell; margin: 0 auto; text-align: center; vertical-align: middle;} 这也会使#inner垂直对齐。 如果不想，请删除display和vertical-align属性。
克里斯·科耶尔（Chris Coyier）在他的博客上撰写了一篇关于“未知中的居中”的 。 这是多种解决方案的综述。 我发布了一个不在此问题中发布的内容。 它比flexbox-solution具有更多的浏览器支持，并且您没有使用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;} 我发现存在一个选择：
大家都说要用：
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 */} 例如，请参见此和下面的代码段：
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. */ } Foo foo
如果父母下有很多孩子，那么您的CSS内容必须类似于 。
HTML内容如下所示：
Foo TextFoo TextFoo TextFoo Text
然后看这个 。
如果内容的宽度未知，则可以使用以下方法 。 假设我们具有以下两个元素：
.outer全宽 .inner未设置宽度（但可以指定最大宽度） 假设元素的计算宽度分别为1000px和300px。 进行如下：
.center-helper包装.inner .center-helper成为内联块； 它的大小与.inner相同，使其宽度为300px。 .center-helper相对于其父对象向右推50％； 这会将其左侧置于500px wrt。 外。 .inner相对于其父级向左推50％； 这会将其左侧放在-150px wrt。 中心助手，这表示其左侧为500-150 = 350px wrt。 外。 .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; } A div with no defined width
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis condimentum sem non turpis consectetur blandit. Donec dictum risus id orci ornare tempor. Proin pharetra augue a lorem elementum molestie. Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.
这是您最想得到的。
#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 % );} 好吧，我设法找到了可能适合所有情况的解决方案，但是使用了JavaScript：
结构如下：
Your content goes here!Your content goes here!Your content goes here!
这是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); })}); 水平和垂直。 它可以与相当现代的浏览器（Firefox，Safari / WebKit，Chrome，Internet Explorer 10，Opera等）一起使用。
.content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } This works with any content
在或上进一步 。
最简单的方法：
#outer { width: 100%; text-align: center; } #inner { margin: auto; width: 200px; } Blabla
另一个无需设置元素宽度的解决方案是使用CSS 3 transform属性。
#outer { position: relative;}#inner { position: absolute; left: 50%; transform: translateX(-50%);} 诀窍是， translateX(-50%) #inner元素设置为其自身宽度的左侧50％。 您可以使用相同的技巧进行垂直对齐。
这是显示水平和垂直对齐的 。
有关更多信息，请 。
以我的经验，使框水平居中的最佳方法是应用以下属性：
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; } Center this!
另请参阅 ！
根据我的经验，以垂直和水平居中的盒子最好的方法是使用一个额外的容器，并应用以下属性：
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; } Center this!
另请参阅 ！
此方法也可以正常工作：
div.container { display: flex; justify-content: center; /* for horizontal alignment */ align-items: center; /* for vertical alignment */} 对于内部<div> ，唯一的条件是其height和width不得大于其容器的height和width 。
Flex拥有超过97％的浏览器支持覆盖率，并且可能是在几行之内解决此类问题的最佳方法：
#outer { display: flex; justify-content: center;} 应用将内联内容居中在行框内居中。 但是，由于默认情况下，内部div的width: 100%您必须设置特定的宽度或使用以下任一格式：
#inner { display: inline-block; } #outer { text-align: center; } Foo foo
使用是另一种选择，它更适合于较旧的浏览器兼容性。 它与一起使用。
#inner { display: table; margin: 0 auto; } Foo foo
行为类似于块元素，并根据flexbox模型布置其内容。 它与 。
请注意： Flexbox与大多数浏览器兼容，但不是全部。 有关完整的最新浏览器兼容性列表，请参见 。
#inner { display: inline-block; } #outer { display: flex; justify-content: center; } Foo foo
使您可以修改CSS视觉格式模型的坐标空间。 使用它，可以平移，旋转，缩放和倾斜元素。 要水平居中，它需要 ， 。
#inner { position: absolute; left: 50%; transform: translate(-50%, 0%); } Foo foo
<center> （不建议使用） 标签是HTML的替代 。 它可以在较旧的浏览器和大多数新浏览器上运行，但是由于该功能已并且已从Web标准中删除，因此不被认为是一种好习惯。
#inner { display: inline-block; }
如果您不想在内部div上设置固定宽度，则可以执行以下操作：
#outer { width: 100%; text-align: center; } #inner { display: inline-block; } Foo foo
这使内部div成为可以以text-align居中的内联元素。
您可以使用display: flex作为外部div，并且要水平居中，您必须添加justify-content: center
#outer{ display: flex; justify-content: center;} 或者，您可以访问以获取更多想法。
我最近不得不居中放置一个“隐藏”的div（即display：none;），该div中有一个需要放在页面中央的表格形式。 我编写了以下jQuery以显示隐藏的div，然后将CSS更新为表格的自动生成的宽度，并更改边距以使其居中。 （显示切换是通过单击链接触发的，但是不需要显示此代码。）
注意：我正在共享这段代码，因为Google将我带到了这个Stack Overflow解决方案中，并且一切都会正常进行，除了隐藏元素没有任何宽度并且在显示它们之前，无法调整大小/居中。
$(function(){ $('#inner').show().width($('#innerTable').width()).css('margin','0 auto'); }); 假设您的div宽度为200px ：
.centered { position: absolute; left: 50%; margin-left: -100px;} 确保父元素的即相对，固定，绝对或粘性。
如果您不知道div的宽度，则可以使用transform:translateX(-50%); 而不是负利润。
编辑：使用CSS calc，代码可以变得更加简单：
.centered { width: 200px; position: absolute; left: calc(50% - 100px);} 原理仍然相同； 将物品放在中间并补偿宽度。
#outer { width:100%; height:100%; display:box; box-orient:horizontal; box-pack:center; box-align:center;} 转载地址：http://oudnb.baihongyu.com/