在一个div中居中图标 - 水平和垂直

Question

我在将图标（垂直和水平）居中于父级 div 上遇到了问题。我的页面上有许多不同大小的父级 divs，因此我希望能够将图标按比例放置在每个父级 div 的中心位置。以下是问题的 JSFiddle：

JsFiddle 链接

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

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

- scientiffic

Answer 1

由于它们已经是inline-block子元素，因此您可以在父级上设置text-align:center，而无需在子元素上设置width或margin:0px auto，这意味着它适用于具有不同widths的动态生成内容。

.img_container, .img_container2 {
    text-align: center;
}

这将使子元素在两个 div 容器中居中。

更新：

对于垂直居中，可以使用 calc() 函数，假设图标的高度已知。

.img_container > i, .img_container2 > i {
    position:relative;
    top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}

jsFiddle演示 - 它有效。

值得一提的是 - 您也可以使用vertical-align:middle，假设父元素设置了display:table-cell。

- Josh Crozier

---

@scientiffic 是的，这只会水平居中...你没有说你也想要垂直居中，你需要吗？ - Josh Crozier

是的，抱歉我没有说明清楚。主要问题是垂直居中。 - scientiffic

@scientiffic 我更新了代码，包括calc()函数 http://jsfiddle.net/aHUtM/6/ 假设图标的高度已知。 - Josh Crozier

谢谢，Josh，我不知道有calc！它很好用。你能把它添加为答案吗？我会标记它为正确的答案。 - scientiffic

我猜这是“最好的”解决方案。 :D - Michael

Answer 2

这里有一种方法可以在任何情况下垂直和水平居中内容，当你不知道宽度或高度或两者都不知道时很有用：

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

<div id="container">
    <a id="update" href="#">
        <i class="icon-refresh"></i>
    </a>
</div>

JSFiddle

请注意，这里的宽度和高度值仅用于演示，您可以将它们更改为任何您想要的内容（或完全删除它们），因为这里的垂直居中是由 table-cell 显示属性的工作方式产生的结果。

- Ennui

Answer 3

水平居中就像这样简单：

text-align: center

当容器高度已知时，垂直居中：

height: 100px;
line-height: 100px;
vertical-align: middle

当容器高度未知且您可以将图像设置为背景时，实现垂直居中:

background: url(someimage) no-repeat center center;

- Otis