CSS вертикально выровнять div при сохранении соотношения сторон

Question

Я использовал JsFiddle на http://jsfiddle.net/5tzk3/10/. Я изменил его, чтобы отображать div как диалоговое окно квадратной формы (как по горизонтали, так и по центру). Результат на http://jsfiddle.net/5tzk3/548/.

Как видите, центрировать по горизонтали было легко, но я не мог отцентрировать его по вертикали. Кто-нибудь, кто знает, как сделать это с чистым CSS?

Отредактированный код ниже:

<div class="blind">
    <div class="wrapper">
        <div class="main">
            I'm your div with an aspect-ratio of 1:1!
        </div>
    </div>
</div>

html, body, .blind {
    height: 100%;
    width: 100%;    
}

.blind {
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
}

.wrapper {
    display: inline-block;
    margin: auto;
    position: relative;
    width: 50%;
}

.wrapper:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.main {
    background-color: rgb(0, 162, 232);
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0; 
}

Answer 1

Использование display: table для родительского div, и display:table-cell; vertical-align: middle для содержимого div, который вы хотите вертикально центрировать.

Answer 2

Наиболее распространенный способ сделать это, если у вас есть элемент с известными размерами, это использовать позиционирование, чтобы сначала расположить его top: 50% (который размещает верхний край элемента на 50% пути вниз), а затем использует отрицательный top-margin половины высоты элемента (потянув его обратно на половину его высоты).

Чтобы дать вам пример, чтобы абсолютно позиционировать 200x200 мертвая точка элемента на странице, которую вы будете использовать:

.element{
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px
} 

Кроме того, вы можете использовать комбинацию display: table а потом display: table-cell на родителей, чтобы открыть возможность использовать vertical-align хотя это немного неприятно, когда речь идет о размещении элементов вокруг него.

Answer 3

Вы можете отбросить абсолютное позиционирование и использовать либо display:table, либо inline-block с псевдоэлементами.

вот смешанный из 2 методов

1) html / body в виде таблицы на одну ячейку2) внутреннее содержимое с сохраненным соотношением и содержимым в виде встроенного блока, установленного посередине.

.ratio1-1 {
  width:25%;
    vertical-align:middle;
  margin:auto;
  background:turquoise;
}
.ratio1-1:before {
  content:'';
  padding:50% 0;
  width:0;
  display:inline-block;
  vertical-align:middle;
}
.ib {  
  display:inline-block;
  vertical-align:middle;
}

/* center body content as a table cell */
html {
  height:100%;
  width:100%;
  display:table;
}
body {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="ratio1-1">
  <div class="ib">content in middle</div>
  </div>

демо: http://codepen.io/gc-nomade/pen/pubFm