CSS：<div> 元素中的中心元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6810031/
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
CSS: center element within a <div> element
提问by Randomblue
To center an HTML element I can use the CSS left: 50%;. However, this centers the element with respect to the whole window.
为了使 HTML 元素居中，我可以使用 CSS left: 50%;。但是，这相对于整个窗口使元素居中。
I have an element which is a child of a <div>element and I want to center the child with respect to this parent <div>, not the whole window.
我有一个元素，它是一个元素的子<div>元素，我想将子元素相对于这个父元素居中<div>，而不是整个窗口。
I do not want the container <div>to have allits content centered, just the one specific child.
我不想容器<div>有所有的内容为中心，只是一个特定的孩子。
回答by pasine
Set text-align:center;to the parent div, and margin:auto;to the child div.
设置text-align:center;为父 div 和margin:auto;子 div。
#parent {
text-align:center;
background-color:blue;
height:400px;
width:600px;
}
.block {
height:100px;
width:200px;
text-align:left;
}
.center {
margin:auto;
background-color:green;
}
.left {
margin:auto auto auto 0;
background-color:red;
}
.right {
margin:auto 0 auto auto;
background-color:yellow;
}<div id="parent">
<div id="child1" class="block center">
a block to align center and with text aligned left
</div>
<div id="child2" class="block left">
a block to align left and with text aligned left
</div>
<div id="child3" class="block right">
a block to align right and with text aligned left
</div>
</div>This a good resource to center mostly anything.
http://howtocenterincss.com/
这是一个很好的资源，可以集中任何东西。
http://howtocenterincss.com/
回答by Gerard Reches
Actually this is very straightforward with CSS3 flex boxes.
实际上这对于 CSS3 flex box非常简单。
.flex-container{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
justify-content: center;
align-items: center;
width: 400px;
height: 200px;
background-color: #3498db;
}
.inner-element{
width: 100px;
height: 100px;
background-color: #f1c40f;
}<div class="flex-container">
<div class="inner-element"></div>
</div>UPDATE:
更新：
It seems that I didn't read the OP edit at the time I wrote this answer. The above code will center all inner elements(without overlapping between them), but the OP wants just an specific element to be centered, not the other inner elements. So @Warface answer second method is more appropiate, but it still requires vertical centering:
在我写这个答案时，我似乎没有阅读 OP 编辑。上面的代码将使所有内部元素居中（它们之间没有重叠），但OP 只希望特定元素居中，而不是其他内部元素。所以@Warface 回答第二种方法更合适，但它仍然需要垂直居中：
.flex-container{
position: relative;
/* Other styling stuff */
width: 400px;
height: 200px;
background-color: #3498db;
}
.inner-element{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/* or 3d alternative if you will add animations (smoother transitions) */
transform: translate3d(-50%,-50%,0);
/* Other styling stuff */
width: 100px;
height: 100px;
background-color: #f1c40f;
}<div class="flex-container">
<p>Other inner elements like this follows the normal flow.</p>
<div class="inner-element"></div>
</div>回答by Warface
CSS
CSS
body{
text-align:center;
}
.divWrapper{
width:960px //Change it the to width of the parent you want
margin: 0 auto;
text-align:left;
}
HTML
HTML
<div class="divWrapper">Tada!!</div>
This should center the div
这应该使 div 居中
2016 - HTML5 + CSS3 method
2016 - HTML5 + CSS3 方法
CSS
CSS
div#relative{
position:relative;
}
div#thisDiv{
position:absolute;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
HTML
HTML
<div id="relative">
<div id="thisDiv">Bla bla bla</div>
</div>
Fiddledlidle
小提琴手
回答by Kevin Bowersox
text-align:center;on the parent div Should do the trick
text-align:center;在父 div 上应该可以解决问题
回答by Ayan
To center only the specific child :
仅将特定孩子居中：
.parent {
height: 100px;
background-color: gray;
position: relative;
}
.child {
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 20px;
height:20px;
margin: auto;
}<div class="parent">
<span class="child">hi</span>
</div> OR, you can use flex too, but that would center all children
或者，您也可以使用 flex，但这会使所有孩子居中
.parent {
height: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background-color: white;
}<div class="parent">
<span class="child">hi</span>
</div>回答by Romi Erez
You can use bootstrap flex class name like that:
您可以像这样使用 bootstrap flex 类名：
<div class="d-flex justify-content-center">
// the elements you want to center
</div>
That will work even with number of elements inside.
即使内部有多个元素，这也将起作用。
回答by stephenmurdoch
just give the parent div position: relative
只需给父 div position: relative
回答by Purag
Is the div a fixed width or a fluid width? Either way, for fluid width you could use:
div 是固定宽度还是流体宽度？无论哪种方式，对于流体宽度，您都可以使用：
#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}
Or you could set the parent div to text-align:center;and the child div to text-align:left;.
或者您可以将父 div 设置为text-align:center;，将子 div 设置为text-align:left;。
And left:50%;only centers it according to the whole page when the div is set to position:absolute;. If yous set the div to left:50%;it should do it relative to the parent div's width. For fixed width, do this:
并且left:50%;仅在 div 设置为 时根据整个页面居中position:absolute;。如果您将 div 设置为left:50%;它应该相对于父 div 的宽度进行设置。对于固定宽度，请执行以下操作：
#parent {
width:500px;
}
#child {
left:50%;
margin-left:-100px;
width:200px;
}
回答by user3178128
If you want to use CSS3:
如果你想使用 CSS3：
position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);
You might want to do further searches to figure out how to get the percentage to fit your element's width.
您可能需要进一步搜索以了解如何获取适合元素宽度的百分比。
回答by Hylke
for example, i have an article div which is inside a main content div.. Inside the article theres an image and under that image is a button, style like this:
例如，我有一个文章 div，它位于主要内容 div 内。文章内有一个图像，该图像下方是一个按钮，样式如下：
.article {
。文章 {
width: whatever;
text-align: center;
float: whatever (in case you got more articles in a row);
margin: give it whatever margin you want;
} .article {
} 。文章 {
}
}
/* inside the article i want the image centered */
/* 在文章中我希望图像居中 */
.article img {
.article img {
float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;
}
}
/* Now under this image in the same article element there should be a button like read more Of course you need to work with em or % when its inside a responsive design*/
/* 现在在同一个文章元素中的这张图片下应该有一个按钮，比如阅读更多当然你需要在响应式设计中使用 em 或 %*/
.button {
。按钮 {
background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/
}
}
Good luck
祝你好运
