Вертикально и горизонтально центрируя контейнер и содержимое в контейнере

Question

Я пытаюсь центрировать контейнер по вертикали и горизонтали, а содержимое внутри с помощью CSS.

Разметка выглядит следующим образом:

<div id="container">
  <img src="..someimage.jpg">
  <img src="..someverticaldivider">
  <form action="action.php">
    <input type="text">
    .... (other inputs)
  </form>
</div>

Мне нужен конечный результат, чтобы он выглядел какэто:

Пока что мой css выглядит следующим образом:

#content{
     position:absolute;
     width: 900px; 
     left:50%;
     top:50%;
     height:300px;
     margin-top:-150px;
     margin-left: -450px; 

}

Это прекрасно работает, и если я добавлю границу к #content, я легко пойму, что этопо центру по горизонтали и вертикали.

Проблема, с которой я сталкиваюсь, заключается в том, что я не знаю размера содержимого внутри #content.Мне нужно уметь выровнять эти элементы 2 изображения и 1 форму по горизонтали и вертикали.Я проверил этот сайт на вертикальное центрирование, но проблема в том, что я не знаю размер моего контента, а контент не только текстовый.

Как лучше всегосделать это с поддержкой старых браузеров (IE7 и выше)?

Answer 1

Вы можете сделать это с display:table-cell

скрипкой

html

<div id="a">
    <div id="b">hello<br/>world</div>
</div>

css

#a {
    display: table;
    width: 100%;
    height: 100%;
}

#b {
    text-align:center;
    vertical-align: middle;
    display: table-cell;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

Answer 2

---

edit 1
И вот окончательный результат жюри
Это также центрирует содержимое внутри прямоугольника по вертикали (изображение, вертикальная линейка, форма)
http://jsfiddle.net/HerrSerker/TuPvF/13/

---

Я пытаюсь дать авторитетный ответ на это.Возможно, это не сработает в мобильных браузерах (смартфоны, iPad и т. Д.).Может ли кто-нибудь проверить?

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

Используйте позиционирование с относительными мерами в некоторыхстарые браузеры IE

http://jsfiddle.net/HerrSerker/TuPvF/

---

<!-- HTML -->
<div class="table">
    <div class="cell">
        <div class="inner">
            <div class="align">
                <img src="//lorempixel.com/200/300">
            </div>
            <div class="align">
                <img src="//lorempixel.com/200/200">
            </div>
        </div>
    </div>
</div>

---

/* all css rules prepended by a hash sign (#) are specifically for IE 7 and below */

html, body {
     /* w3c dropped height percentage in some css2 or so version 
      * if you don't know the heights of ALL the parent element up to the root.
      * So give ALL parents a known height
      * CAVE: If mobile browsing is important check, if this does not affect scrolling and zooming
      */
    height: 100%; 
}
.table{
    /* modern browsers support display: table
     * use this for an easy vertical alignment
     */
    height: 100%;
    width: 100%;
    display: table;
    /* check if you want absolute positioning */
    position: absolute;
    /* if you don't want absolute positioning, uncomment the next line and comment the previous line out */
    /* #position: relative */ 
}
.table > .cell {
     /* modern browsers support display: table-cell
     * use this for an easy vertical alignment
     * You don't need table-row
     */     
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* this is again for lte IE7 */
    #position: absolute;
    /* 50% is half of the containing element (.table here) */
    #top: 50%;
    #width: 100%;
}
.cell > .inner {
    text-align: left;
    display: inline-block;
    /* triggers hasLayout in IE 6+7 */    
    #zoom: 1;
    /* if IE 6+7 element have hasLayout, display: inline behaves as display: inline-block. Strange, huh?  */
    #display: inline;
    #position: relative;
    /* here the 50% are the half of the .cell element */
    #top: -50%;
}
.cell > .inner > .align {
    vertical-align: middle;
    display: inline-block;
    #zoom: 1;
    #display: inline;
}


.inner {
    border: 1px solid gold;
    padding: 10px;
    white-space: nowrap;
}

Answer 3

Не могли бы вы дать немного больше информации, например, почему вы не знаете, насколько большой контент?Похоже, вы хотите, чтобы CSS динамически изменял форматирование в зависимости от загружаемого контента.Я не думаю, что это то, для чего создан CSS.Javascript будет простым и, вероятно, самым простым, но вы можете сделать это на стороне сервера с помощью чего-то вроде PHP.

Если вы дадите нам немного больше информации о контексте, в котором это реализовано, мыЯ смогу предложить более конкретные советы о том, какие способы могут быть использованы для реализации этого.