Html div 中的中心图标 - 水平和垂直
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19124255/
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
Center icon in a div - horizontally and vertically
提问by scientiffic
I'm having issues centering icons (both vertically and horizontally) in a parent div. I have many parent divson my page that are different sizes, so I want to be able to proportionally place icons in the center of each parent div. Here's a JSFiddle of the problem:
我在父 div 中将图标（垂直和水平）居中时遇到问题。我的divs页面上有许多不同大小的父级，因此我希望能够按比例将图标放置在每个父级 div 的中心。这是问题的 JSFiddle：
HTML
HTML
<div class="img_container">
<i class="icon-play-circle"></i>
</div>
<br>
<div class="img_container2">
<i class="icon-play-circle"></i>
</div>
CSS
CSS
.img_container{
width:100px;
height:100px;
position:relative;
background:red;
}
.img_container2{
width:100px;
height:50px;
position:relative;
background:blue;
}
.icon-play-circle{
position:absolute;
top:45%;
left:45%;
color: white;
}
回答by Josh Crozier
Since they are already inline-blockchild elements, you can set text-align:centeron the parent without having to set a widthor margin:0px autoon the child. Meaning it will work for dynamically generated content with varying widths.
由于它们已经是inline-block子元素，因此您可以text-align:center在父元素上设置，而无需在子元素上设置width或margin:0px auto。这意味着它将适用于动态生成的具有不同widths.
.img_container, .img_container2 {
text-align: center;
}
This will center the child within both divcontainers.
这将使孩子在两个div容器内居中。
UPDATE:
更新：
For vertical centering, you can use the calc()function assuming the height of the icon is known.
对于垂直居中，您可以使用calc()假设图标高度已知的函数。
.img_container > i, .img_container2 > i {
position:relative;
top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}
jsFiddle demo- it works.
jsFiddle 演示- 它有效。
For what it's worth - you can also use vertical-align:middleassuming display:table-cellis set on the parent.
对于它的价值 - 您也可以使用vertical-align:middle假设display:table-cell设置在父级上。
回答by Ennui
Here is a way to center content both vertically and horizontally in any situation, which is useful when you do not know the width or height or both:
这是一种在任何情况下垂直和水平居中内容的方法，当您不知道宽度或高度或两者时，这很有用：
CSS
CSS
#container {
display: table;
width: 300px; /* not required, just for example */
height: 400px; /* not required, just for example */
}
#update {
display: table-cell;
vertical-align: middle;
text-align: center;
}
HTML
HTML
<div id="container">
<a id="update" href="#">
<i class="icon-refresh"></i>
</a>
</div>
Note that the width and height values are just for demonstration here, you can change them to anything you want (or remove them entirely) and it will still work because the vertical centering here is a product of the way the table-celldisplay property works.
请注意，这里的宽度和高度值仅用于演示，您可以将它们更改为您想要的任何内容（或完全删除它们）并且它仍然有效，因为此处的垂直居中是table-celldisplay 属性工作方式的产物。
回答by Otis
Horizontal centering is as easy as:
水平居中非常简单：
text-align: center
Vertical centering when the container is a known height:
当容器为已知高度时垂直居中：
height: 100px;
line-height: 100px;
vertical-align: middle
Vertical centering when the container isn't a known height AND you can set the image in the background:
当容器不是已知高度时垂直居中，您可以在背景中设置图像：
background: url(someimage) no-repeat center center;
