Html 如何水平居中 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/114543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to horizontally center a <div>
提问by Lukas
How can I horizontally center a <div>within another <div>using CSS?
如何使用 CSS<div>在另一个中水平居中<div>？
<div id="outer">
<div id="inner">Foo foo</div>
</div>
回答by Justin Poliey
You can apply this CSS to the inner <div>:
您可以将此 CSS 应用于内部<div>：
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the widthto 50%. Any width less than the containing <div>will work. The margin: 0 autois what does the actual centering.
当然，您不必将 设置width为50%。任何小于包含的宽度<div>都可以使用。这margin: 0 auto就是实际居中的作用。
If you are targeting Internet Explorer 8(and later), it might be better to have this instead:
如果您的目标是Internet Explorer 8（及更高版本），最好改为使用它：
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width.
它将使内部元素水平居中，并且无需设置特定的width.
Working example here:
这里的工作示例：
#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>回答by Alfred
If you don't want to set a fixed width on the inner divyou could do something like this:
如果您不想在内部设置固定宽度，div您可以执行以下操作：
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}<div id="outer">
<div id="inner">Foo foo</div>
</div>That makes the inner divinto an inline element that can be centered with text-align.
这使得内部div成为可以以text-align.
回答by Konga Raju
The best approaches are with CSS 3.
最好的方法是使用CSS 3。
Box model:
箱体型号：
#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>According to your usability you may also use the box-orient, box-flex, box-directionproperties.
根据您的可用性，您还可以使用这些box-orient, box-flex, box-direction属性。
Flex:
弹性：
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
Read more about centering the child elements
阅读有关将子元素居中的更多信息
And this explains why the box model is the best approach:
而这也解释了为什么盒模型是最好的办法：
回答by nuno_cruz
Suppose that your div is 200 pixels wide:
假设您的 div 是 200 像素宽：
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Make sure the parent element is positioned, i.e., relative, fixed, absolute, or sticky.
确保父元素已定位，即相对、固定、绝对或粘性。
If you don't know the width of your div, you can use transform:translateX(-50%);instead of the negative margin.
如果您不知道 div 的宽度，则可以使用transform:translateX(-50%);负边距代替。
https://jsfiddle.net/gjvfxxdj/
https://jsfiddle.net/gjvfxxdj/
With CSS calc(), the code can get even simpler:
使用CSS calc()，代码可以变得更简单：
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
The principle is still the same; put the item in the middle and compensate for the width.
原理还是一样的；将项目放在中间并补偿宽度。
回答by Tom Maton
I've created this exampleto show how to verticallyand horizontallyalign.
我创建了这个例子来展示如何垂直和水平align。
The code is basically this:
代码基本上是这样的：
#outer {
position: relative;
}
and...
和...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
And it will stay in the centereven when you resizeyour screen.
center即使您调整屏幕大小，它也会保持不变。
回答by Danield
Some posters have mentioned the CSS 3 way to center using display:box.
一些海报提到了使用 .css 居中的 CSS 3 方式display:box。
This syntax is outdated and shouldn't be used anymore. [See also this post].
此语法已过时，不应再使用。[另见这篇文章]。
So just for completeness here is the latest way to center in CSS 3 using the Flexible Box Layout Module.
所以为了完整起见，这里是使用弹性框布局模块在 CSS 3 中居中的最新方法。
So if you have simple markup like:
因此，如果您有简单的标记，例如：
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
...and you want to center your items within the box, here's what you need on the parent element (.box):
...并且您想将您的项目集中在框内，这是您在父元素 (.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>If you need to support older browsers which use older syntax for flexbox here'sa good place to look.
如果您需要支持对 flexbox 使用旧语法的旧浏览器，这里是一个不错的地方。
回答by Salman von Abbas
If you don't want to set a fixed width and don't want the extra margin, add display: inline-blockto your element.
如果您不想设置固定宽度并且不需要额外的边距，请添加display: inline-block到您的元素中。
You can use:
您可以使用：
#element {
display: table;
margin: 0 auto;
}
回答by iamnotsam
Centering a div of unknown height and width
将未知高度和宽度的 div 居中
Horizontally and vertically. It works with reasonably modern browsers (Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera, etc.)
水平和垂直。它适用于相当现代的浏览器（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>回答by neoneye
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
回答by gizmo
It cannot be centered if you don't give it a width. Otherwise, it will take, by default, the whole horizontal space.
如果你不给它一个宽度，它就不能居中。否则，默认情况下，它将占用整个水平空间。
