Question

我遇到了在父div中将图标（垂直和水平）居中的问题。我的页面上有许多不同大小的父divs，所以我希望能够按比例将图标放在每个父div的中心。这是问题的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;
}

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 demo - 它有效。

对于它的价值 - 你也可以使用vertical-align:middle假设在父母身上设置了display:table-cell。

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

请注意，宽度和高度值仅用于演示，您可以将它们更改为您想要的任何内容（或完全删除它们），它仍然有效，因为此处的垂直居中是{{1显示属性有效。

编辑：链接到错误的JSFiddle！

Answer 3

水平居中非常简单：

text-align: center

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

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

当容器不是已知高度时垂直居中并且您可以在后台设置图像：

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

div中的中心图标 - 水平和垂直

3 个答案: