Блог

Главная - Вопросы по программированию - Элемент CSS (SASS) не может центрироваться

Элемент CSS (SASS) не может центрироваться

#html #css #sass

#HTML #css #sass

Вопрос:

Я пытаюсь создать всплывающую карточку, но карточка не выравнивается по вертикали. Я использовал position: absolute; для позиционирования, но карточка отображается внизу.

CSS (SASS)

 .popup {
  height: 100vw;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba($color-black, 0.8);
  z-index: 3000;
  amp;__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 50%;
    background-color: $color-white;
    box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
    border-radius: 3px;
    display: table;
    overflow: hidden;
  }

Всплывающее окно реализовано не полностью, я проверял, где будет отображаться элемент.
Этот код показывает белый прямоугольник внизу, а не посередине. Где я надеялся, что это будет.

HTML

 <div class="popup">
    <div class="popup__content">
        amp;nbsp;
    </div>
</div>

popup Класс является прямым дочерним элементом body , поэтому на него не влияют никакие другие классы. Кто-нибудь видит, где я мог бы облажаться.

Ответ №1:

попробуйте это:

 .popup {
 height: 100vw;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba($color-black, 0.8);
  z-index: 3000;
  display:flex;
  justify-content:center;
  align-items:center;
  amp;__content {
    
    transform: translate(-50%, -50%);
    width: 75%;
    height: 50%;
    background-color: $color-white;
    box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
    border-radius: 3px;
    display: table;
    overflow: hidden;
  }

Ответ №2:

Попробуйте использовать display: flex с justify-content, align-items вместо position: fixed. Это будет конструктивный выбор для комфортного будущего в будущем.

Пожалуйста, обратитесь к следующему URL-адресу через переводчик Google. Этот сайт хорошо детализирован.

https://heropy.blog/2018/11/24/css-flexible-box/

MDN: https://developer.mozilla.org/ko/docs/Web/CSS/flex

Ответ №3:

Используйте position: fixed; также для дочернего контейнера ( amp;__content ). position: absolute; относится к следующему более высокому предку с position: relative , так что night не подходит в каждой ситуации.

Ответ №4:

 .popup {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 3000;
  }
  .popup__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: white;
    box-shadow: 0 2rem 4rem green;
    border-radius: 3px;
  }  
 <div class="popup">
    <div class="popup__content">
        amp;nbsp;
    </div>
</div>