it-swarm.com.ru

Центрируйте div по горизонтали и вертикали и сохраняйте его по центру при изменении размера родительского элемента

Я хочу центрировать div по горизонтали и вертикали в любое время.

Я могу уменьшить/увеличить ширину окна, и div будет отвечать, всегда оставаясь в центре окна

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

Вот пример JSFiddle из того, что у меня есть в данный момент . Но я хочу также сохранить div по центру, так что если я уменьшу/увеличу высоту окна, div будет реагировать, оставаясь в середине окна. 

Что касается примера, я хочу, чтобы черный ящик располагался вертикально по центру при изменении размера окна таким же образом, каким он всегда остается в центре по горизонтали.

15
Aaron

Вы можете сделать это с помощью таблиц CSS:

JsFiddle

Markup

<div class="container">
    <div class="cent"></div>
</div>

(Соответствующий) CSS

html,body
{
    height: 100%;
}
body
{
   display: table; 
   margin: 0 auto;
}

.container
{  
    height: 100%;
    display: table-cell;   
    vertical-align: middle;    
}
.cent
{
    height: 50px;
    width: 50px;
    background-color: black;      
}
31
Danield
.cent
{
  height:50px;
  width:50px;
  background-color:black;
  position:absolute;
  left:50%;
  top:50%;
  margin: 0 auto;
}
0
Ritabrata Gautam

Обычно margin: 0 auto; выполняет горизонтальное выравнивание, а vertical-align: middle для вертикального выравнивания. Я попробовал это, но не работает. 

Попробуйте следующее css

.cent {
    height: 50px;
    width: 50px;
    background: #222;
    position: absolute;
    margin: -50px 0 0 -50px;
    left: 50%;
    top: 50%;
}

Проверьте это в JSFiddle .

Чтобы узнать больше о проверке трюка Dead Center a Element .

0
Praveen

Проверьте это 

.cent {
    width: 50px;
    height: 50px;
    background-color: black;

    position:absolute;
    left:0; 
    right:0;
    top:0; 
    bottom:0;
    margin:auto;

    max-width:100%;
    max-height:100%;
    overflow:auto;
}

здесь у вас есть пример: http://jsbin.com/iquviq/30/edit

0
Michael Unterthurner

Проверь это 

 .cent
   {
      height:50px;
      width:50px;
      background-color:black;
      margin:auto;
      margin-top:50%;
   }
0
ubaid ashraf

попробуй это

position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
0
Omar Shbaro

попробуй это

http://jsfiddle.net/tVuS6/4/

      .cent
    {
    height:50px;
    width:50px;
    background-color:black;
    margin-left: -150px;
    margin-top: -150px;
   margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    }
0
Falguni Panchal

Демонстрационная ссылка здесь

.cent
{
    height:50px;
    width:50px;
    background-color:black;
    margin:auto;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-25px;
    margin-top:-25px;
}
0
Swarnamayee Mallia