Почему атрибут auto для поля не работает вертикально, пока он работает горизонтально?

Я видел, что при разработке веб-сайтов вертикальное центрирование контейнера (фиксированной высоты) внутри контейнера с произвольной высотой всегда является кошмаром для веб-разработчика (по крайней мере, меня), когда речь идет о горизонтальном центрировании контейнера (фиксированной ширины) внутри контейнера с произвольной шириной, margin:0px auto; имеет тенденцию служить легким выходом в стандартной модели. Когда все может быть так просто, почему CSS не работает с margin:auto 0px;, когда речь идет о центрировании контейнера с фиксированной высотой внутри контейнера с произвольной высотой? Есть ли какая-то конкретная причина? Спасибо за ваше понимание заранее.

Ответ 1

Это действительно меньше кошмара, чем вы думаете, просто не используйте поля. vertical-align действительно то, на что вы должны полагаться для вертикального центрирования по высоте. Я собрал краткую демонстрацию, чтобы продемонстрировать свою точку зрения:

HTML:

<span></span><div id="any-height"></div>

CSS

* { margin: 0; padding: 0; }
html, body { 
    height: 100%;
    text-align: center; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
#any-height { 
    background: #000;
    text-align: left;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: inline-block; }

Смотрите: http://jsfiddle.net/Wexcode/jLXMS/

Ответ 2

Правильный ответ на ваш вопрос заключается в том, что margin: auto 0 работает не так, как работает margin: 0 auto, потому что width: auto работает не так, как это делает height: auto.

Вертикальная автоматическая маржа работает для абсолютно позиционированных элементов с известной высотой.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 150px;
    height: 150px;
    margin: auto;
}

Ответ 3

css ----------------

.aligncenter{
      display: -webkit-box;
      display: -moz-box;
      display: box;
      -webkit-box-align: center;
      -moz-box-align: center;
      flex-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      flex-pack: center;
}

html -------------------------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

примечание ----------- этот класс css работает почти со всеми браузерами