0

Добрый день! Подскажите, пожалуйста, почему блок сразу при открытии не становится по центру вертикали и горизонтали, а центрируется только при ресайзе страницы, где ошибка? При этом разметка и стиль не должны меняться. Благодарю!

$(window).resize(function(){
    $('.div_body').css({
        position:'absolute',
        left: ($(window).width() - $('.div_body').outerWidth())/2,
        top: ($(window).height() - $('.div_body').outerHeight())/2
    });
});
$(window).resize();
.div,
.div_overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.div_overlay {
  background-color: rgba(0,0,0,1);
}
.div_body {
  background: chocolate;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="div_overlay">
<div class="div_body">Много много текста</div>
</div>
</div>

2
  • 1
    поместите Ваш код внутри $(document).ready(function(){ ... });
    – user176262
    23 авг 2017 в 14:00
  • У Вас кастомный шрифт?
    – Oleg
    23 авг 2017 в 14:05

2 ответа 2

6

У .div_body изначально не установлено абсолютное позиционирование, поэтому его ширина в начале равна ширине окна.

Сделайте либо так

$(window).resize(function() {
  $('.div_body')
    .css({
      left: ($(window).width() - $('.div_body').outerWidth()) / 2,
      top: ($(window).height() - $('.div_body').outerHeight()) / 2
    });
});
$(window).resize();
.div,
.div_overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.div_overlay {
  background-color: rgba(0, 0, 0, 1);
}

.div_body {
  background: chocolate;
  color: white;
  position: absolute
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="div_overlay">
    <div class="div_body">Много много текста</div>
  </div>
</div>

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

$('.div_body').css({position:'absolute'});
$(window).resize(function() {
  $('.div_body')
    .css({
      left: ($(window).width() - $('.div_body').outerWidth()) / 2,
      top: ($(window).height() - $('.div_body').outerHeight()) / 2
    });
});
$(window).resize();
.div,
.div_overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.div_overlay {
  background-color: rgba(0, 0, 0, 1);
}

.div_body {
  background: chocolate;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="div_overlay">
    <div class="div_body">Много много текста</div>
  </div>
</div>

или в обработчике вначале установите позиционирование, а потом добавьте координаты

$(window).resize(function() {
  $('.div_body')
    .css({
      position: 'absolute'
    })
    .css({
      left: ($(window).width() - $('.div_body').outerWidth()) / 2,
      top: ($(window).height() - $('.div_body').outerHeight()) / 2
    });
});
$(window).resize();
.div,
.div_overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.div_overlay {
  background-color: rgba(0, 0, 0, 1);
}

.div_body {
  background: chocolate;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="div_overlay">
    <div class="div_body">Много много текста</div>
  </div>
</div>

1
  • +1 position:absolute; в .div_body
    – user176262
    23 авг 2017 в 14:09
1

Потому что вы вызываете позиционирование DIV при resize(), т.е срабатывает после изменения окна, документация . Если вы хотите по какой то причине сделать центровку блоков именно через Jquery вам просто надо сделать так (после загрузки страницы):

   jQuery(document).ready(function(j){
getCenter();

$(window).resize(function(){
getCenter();
});

    });
    function getCenter(){
 $('.div_body').css({
            position:'absolute',
            left: ($(window).width() - $('.div_body').outerWidth())/2,
            top: ($(window).height() - $('.div_body').outerHeight())/2
        });
}
1
  • Поэтому вам надо использовать до и после маштабирования, обновлю ответ
    – Arsen
    23 авг 2017 в 13:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.