Центр DIV по горизонтали и вертикали [дубликат]

этот вопрос уже есть ответ здесь:



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



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



у меня есть пример здесь, чтобы играть: 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>


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

668   7  

7 ответов:

после многих попыток я нахожу способ, который работает. Я разделяю его здесь, если это кому-то полезно. Вы можете увидеть его здесь работает: 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;
    }
108  
2015-03-18 11:46:59

на современные браузеры

когда у вас есть такая роскошь. Есть 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

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

84  
2014-05-19 01:24:03

вот демо: 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>
41  
2013-12-28 02:05:04

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

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

Текущий Код

2  
2014-11-12 08:00:19

Я не верю, что есть способ сделать это строго с 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(...).

1  
2013-01-02 18:01:45

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

margin: auto;

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

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

0  
2013-01-02 16:46:50

вы можете сравнить различные методы, очень хорошо объясненные на этой странице: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;
}
0  
2013-01-02 17:37:31

Comments

    Ничего не найдено.
Click here to cancel reply.