Центрируйте div горизонтально и вертикально и сохраняйте центрирование при изменении размера родительского элемента

Я хочу постоянно центрировать div горизонтально и вертикально.

Я могу уменьшить/увеличить ширину окна, и div ответит всегда, оставаясь в центре окна

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

Вот пример JSFiddle того, что у меня есть. Но я хочу, чтобы div был центрирован по вертикали, поэтому, если я уменьшу/увеличу высоту окна, div ответит, оставаясь посередине окна.

Что касается примера, я хочу, чтобы черный ящик вертикально центрировался по размеру окна таким же образом, что он всегда остается в центре по горизонтали.

Ответ 1

Вы можете сделать это с помощью таблиц CSS:

JsFiddle

Разметка

<div class="container">
    <div class="cent"></div>
</div>

(Релевантно) CSS

html,body
{
    height: 100%;
}
body
{
   display: table; 
   margin: 0 auto;
}

.container
{  
    height: 100%;
    display: table-cell;   
    vertical-align: middle;    
}
.cent
{
    height: 50px;
    width: 50px;
    background-color: black;      
}

Ответ 2

Проверьте это

.cent {
    width: 50px;
    height: 50px;
    background-color: black;

    position:absolute;
    left:0; 
    right:0;
    top:0; 
    bottom:0;
    margin:auto;

    max-width:100%;
    max-height:100%;
    overflow:auto;
}

здесь у вас есть пример: http://jsbin.com/iquviq/30/edit

Ответ 3

Проверьте это

 .cent
   {
      height:50px;
      width:50px;
      background-color:black;
      margin:auto;
      margin-top:50%;
   }

Ответ 4

попробуйте это

position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;

Ответ 5

попробуйте это

http://jsfiddle.net/tVuS6/4/

      .cent
    {
    height:50px;
    width:50px;
    background-color:black;
    margin-left: -150px;
    margin-top: -150px;
   margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    }

Ответ 6

Вам нужно будет поместить ваш div абсолютно, это поместит div относительно вашего окна, в отличие от вашего макета. Тогда с top:50%; и left:50%;, расположите его по центру, и оно будет оставаться таким же при изменении размера окна.

.cent {
     height:50px;
     width:50px;
     background-color:black;
     margin:auto;
     top:50%;
     left:50%;
     position:absolute; 
}

Ответ 7

Демо-ссылка здесь

.cent
{
    height:50px;
    width:50px;
    background-color:black;
    margin:auto;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-25px;
    margin-top:-25px;
}

Ответ 8

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  position:absolute;
  left:50%;
  top:50%;
  margin: 0 auto;
}

Ответ 9

Обычно margin: 0 auto; выполняет горизонтальное выравнивание и vertical-align: middle для вертикального выравнивания. Я попробовал, но не работал.

Попробуйте ниже css

.cent {
    height: 50px;
    width: 50px;
    background: #222;
    position: absolute;
    margin: -50px 0 0 -50px;
    left: 50%;
    top: 50%;
}

Проверьте его JSFiddle.

Чтобы узнать больше о проверке трюка Dead Center a Element.