Центрировать DIV горизонтально и вертикально

Есть ли способ CENTER A DIV по вертикали и горизонтали, но важно, что содержимое не будет вырезано, когда окно меньше содержимого У div должен быть цвет фона, ширина и высота.

Я всегда центрировал divs с абсолютным позиционированием и отрицательными полями, как в приведенном примере. Но у него есть проблема, что он сокращает содержание сверху. Есть ли способ центрировать div.content без этой проблемы?

У меня есть пример для игры: http://jsbin.com/iquviq/1/edit

CSS

body { margin: 0px; }

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

/* 
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
*/ 


.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;/* half width*/
    margin-top:-300px;/* half height*/
}

HTML:

<div class="background">
    <div class="content"> some text </div>
</div>

Мой вопрос не дублируется "Как центрировать элемент по горизонтали и по вертикали?" - Мой вопрос задавали раньше. (просто проверьте даты). 2- Мой вопрос задается очень четко и черным как условие: "содержимое не будет вырезано, когда окно меньше содержимого"

Ответы

Ответ 1

Попробовав много вещей, я нахожу способ, который работает. Я разделяю его здесь, если он кому-то полезен. Вы можете увидеть его здесь: http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
    }

Ответ 2

Для современных браузеров

Когда у вас есть эта роскошь. Там flexbox тоже, но это не широко поддерживается на момент написания этой статьи.

HTML:

<div class="content">This works with any content</div>

CSS

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

Поделитесь с ним далее Codepen или на JSBin

Для более старой поддержки браузера, посмотрите в другом месте этого потока.

Ответ 3

Вот демо: http://www.w3.org/Style/Examples/007/center-example

Метод (Пример JSFiddle)

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML:

<div id="content">
    Content goes here
</div>

Другой метод (Пример JSFiddle)

CSS

body, html, #wrapper {
    width: 100%;
    height: 100%
}
#wrapper {
    display: table
}
#main {
    display: table-cell;
    vertical-align: middle;
    text-align:center
}

HTML

<div id="wrapper">
<div id="main">
    Content goes here
</div>
</div>

Ответ 4

Допустимый способ сделать это независимо от размера div для любого размера браузера:

   div{
    margin:auto;
    height: 200px;
    width: 200px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:red;
   }

Живой код

Ответ 5

Я не верю, что есть способ сделать это строго с помощью CSS. Причиной является ваш "важный" квалификатор к вопросу: принудительное расширение родительского элемента с содержимым его дочернего элемента.

Я предполагаю, что вам придется использовать некоторые фрагменты JavaScript, чтобы найти высоту дочернего элемента и внести коррективы.

Итак, с этим HTML:

<div class="parentElement">  
  <div class="childElement">  
    ...Some Contents...  
  </div>  
</div>

Этот CSS:

.parentElement {  
  position:relative;
  width:960px;
}
.childElement {
  position:absolute;
  top:50%;
  left:50%;
}

Этот jQuery может быть полезным:

$('.childElement').each(function(){
  // determine the real dimensions of the element: http://api.jquery.com/outerWidth/
  var x = $(this).outerWidth();
  var y = $(this).outerHeight();
  // adjust parent dimensions to fit child
  if($(this).parent().height() < y) {
    $(this).parent().css({height: y + 'px'});
  }
  // offset the child element using negative margins to "center" in both axes
  $(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});

Не забудьте правильно загрузить jQ, либо в тело под затронутыми элементами, либо в голове внутри $(document).ready(...).

Ответ 6

Вы хотите установить стиль

margin: auto;

И удалите стили позиционирования (сверху, влево, вправо)

Я знаю, что это центрирует horrizontaly, но я не уверен в вертикали!

Ответ 7

Вы можете сравнить различные методы, очень хорошо объясненные на этой странице: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Метод, который они рекомендуют, заключается в добавлении пустого плавающего элемента до того, как вы сконцентрируете контент, и очистите его. У него нет недостатка, о котором вы говорили.

Я разветкил ваш JSBin, чтобы применить его: http://jsbin.com/iquviq/7/edit

HTML

<div id="floater">
</div>

<div id="content">
  Content here
</div>

CSS

#floater {
  float: left; 
  height: 50%; 
  margin-bottom: -300px;
}

#content {
  clear: both; 
  width: 200px;
  height: 600px;
  position: relative; 
  margin: auto;
}