Значок центра в div - по горизонтали и по вертикали

У меня возникают проблемы с центрированием значков (как по вертикали, так и по горизонтали) в родительском div. У меня много родительских divs на моей странице разных размеров, поэтому я хочу иметь возможность пропорционально размещать значки в центре каждого родительского div. Здесь JSFiddle проблемы:

http://jsfiddle.net/kVHbV/

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

Ответы

Ответ 1

Поскольку они уже являются inline-block дочерними элементами, вы можете установить text-align:center в родительском, не устанавливая width или margin:0px auto для дочернего элемента. Это означает, что он будет работать для динамически созданного контента с изменяющимся widths.

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

Это будет центрировать ребенка в обоих контейнерах div.

UPDATE:

Для вертикального центрирования вы можете использовать функцию 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 установлен на родительском.

Ответ 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 отображение свойств.

edit: связано с неправильным JSFiddle!

Ответ 3

Горизонтальное центрирование выполняется так же легко, как:

text-align: center

Вертикальное центрирование, когда контейнер является известной высотой:

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

Вертикальное центрирование, когда контейнер не является известной высотой И вы можете установить изображение в фоновом режиме:

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