Динамически центрирующие элементы с css

Question

Есть ли способ динамически центрировать два объекта, используя только css? По динамическому центру i означает, что если размер одного из объектов изменится, css не будет иметь изменения.

На данный момент для достижения этого не динамически im используя css ниже, есть ли способ сделать это, не зная размеров высоты дочернего элемента перед рукой и, следовательно, не в состоянии правильно установить top: и left:?

---

HTML

<div class="box"> 
    <img src="myimageurl" width="100" height="100"> 
</div> 

CSS

.box { 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

.box img { 
    margin-top: 50%; 
    margin-left: 50%; 
    position:relative; 

/* These are the values id like to dynamically set */ 

    top: -50px; /* being half of the image height */ 
    left: -50px; /* being half of the image width */ 
} 

---

Ive сделал Js скрипку вопроса здесь: http://jsfiddle.net/gnygxbxe/

Answer 1

Вам не нужно, чтобы вычислить любую процентную позицию. Используйте псевдоэлемент для его центрирования. Вам просто нужно убедиться, что все элементы внутри имеют свойства display: inline-block и vertical-align: middle.

Помните, что элементы внутри коробки должны быть в 1 строке. Поэтому, если вы хотите поместить много текста, просто оберните текст как span или что-нибудь внутри .box.

Для справки, прочитать: https://css-tricks.com/centering-in-the-unknown/

Смотрите этот фрагмент кода. Поддерживается IE8 +.

.box { 
 
    margin: 20px; 
 
    background: #f8f8f8; 
 
    border: #f0f0f0 solid 1px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
} 
 
    
 
.box:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    margin-right: -0.15em; 
 
    vertical-align: middle; 
 
} 
 
.box > * { 
 
    display: inline-block; 
 
    padding: 15px; 
 
    border: 1px solid #ccc; 
 
    vertical-align: middle; 
 
}

<div class="box" style="height: 300px;"> 
 
    <img src="http://placehold.it/100x100" /> 
 
</div>

Answer 2

Использование display: table-cell, vertical-align для вертикального центрирования и text-align для горизонтального центрирования.

.img {  
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

http://jsfiddle.net/gnygxbxe/1/

Answer 3

.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
} 
 

 
.box img { 
 
    position:relative; top: 50%; left: 50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    -ms-transform: translate(-50%,-50%); 
 
     transform: translate(-50%,-50%); 
 
}

<div class="box"> 
 
    <img src="http://www.reviversoft.com/blog/wp-content/uploads/2013/08/Spinning-Beach-Ball1.png" width="100" height="100"> 
 
</div>

Answer 4

Если вы поддерживаете браузеры 'Evergreen', использование CSS 'перевести', смотрите ниже:

.box { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

.box img { 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

http://jsfiddle.net/gnygxbxe/2/

Answer 5

Вы можете сделать так же

.box { 
    width: 200px; 
    height: 200px; 
    background:red; 
    position:relative; 
} 

.box img { 
    display:block; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
} 

Answer 6

.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    position: absolute; 
 
    text-align: center; 
 
} 
 

 
.box img { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.centered { 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<div class="box"> 
 
    <span class="centered"></span> 
 
    <img src="http://www.reviversoft.com/blog/wp-content/uploads/2013/08/Spinning-Beach-Ball1.png" width="100" height="100"> 
 
</div>