Как переместить контейнер div в центр экрана, внутри него должны быть дочерние элементы div - PullRequest
Новая
       28

Как переместить контейнер div в центр экрана, внутри него должны быть дочерние элементы div

1 голос
/ 26 марта 2019

У меня есть следующий код HTML / CSS: 

<style>.dummy {
  color: greenyellow;
}

.middle-container {
  position: absolute;
  top: 50%;
  left: 50%;
}

.middle-container-box {
  width: 50px;
  height: 50px;
  background-color: red;
}

.middle-container-text {
  color: red;
  font-weight: bold;
  font-size: 15px;
}

</style>
<html>

<body>
  <div class="dummy">
    Lorem Ipsum is simply dummy text...
  </div>
  <div class="middle-container">
    <div class="middle-container-box"></div>
    <div class="middle-container-text">
      this text needs to be in the center
    </div>
  </div>
</body>

</html>

В этой песочнице: https://codesandbox.io/s/2py075pqnr Мне нужно иметь middle-container в центре экрана, а элементы div и текста (которые находятся внутри этого контейнера) должны быть централизованы внутри контейнера.

Так что его нужно переместить влево, что-то вроде: https://prnt.sc/n349h1 (нам нужно переместить его только влево). Но перемещать его с фиксированными значениями (в пикселях) не вариант, так как мне нужно, чтобы он работал на всех разрешениях экрана.

Ответы [ 3 ]

1 голос
/ 26 марта 2019

Вы можете сделать это с помощью transfom

CSS 

.dummy {
  color: greenyellow;
}

.middle-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.middle-container-box {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
}

.middle-container-text {
  color: red;
  font-weight: bold;
  font-size: 15px;
}

ДЕМО ЗДЕСЬ

1 голос
/ 26 марта 2019

Вам нужно использовать translate, чтобы переместиться в бокс обратно в центр и согнуть, чтобы центрировать его детей: 

.dummy {
  color: greenyellow;
}

.middle-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%); /* this moves this box back to the middle (back up and left 50% of itself) */
  display:flex;           /* the following four align it's children to the center horizontally and vertically */
  flex-direction:column;
  align-items:center; 
  justify-content:center;
}

.middle-container-box {
  width: 50px;
  height: 50px;
  background-color: red;
}

.middle-container-text {
  color: red;
  font-weight: bold;
  font-size: 15px;
}
<div class="dummy">
  Lorem Ipsum is simply dummy text...
</div>
<div class="middle-container">
  <div class="middle-container-box"></div>
  <div class="middle-container-text">
    this text needs to be in the center
  </div>
</div>
0 голосов
/ 26 марта 2019

Изменить .middle-container , установить top, left, right, bottom на 0, а затем установить поле на auto.Ваш текст уже находится в центре, потому что он дает div, его ширину, вам нужно поместить .middle-container-box на средний экран настройки, чтобы заблокировать и установить для 0 значение auto.Смотрите ниже: 

.middle-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.middle-container-box {
    width: 50px;
    height: 50px;
    background-color: red;
    display: block;
    margin: 0 auto;
}
.middle-container-text {
    color: red;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...