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

Рейтинг: 0Ответов: 1Опубликовано: 17.03.2023

Есть вот такой упрощенный пример

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000;
  overflow: hidden;
  color: #fff;
  font-family: sans-serif;
}
body:before{
  content:"";
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  background-color: #00f;
  z-index: 10;
}
body:after{
  content:"";
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #00f;
  z-index: 10;
}

.block_img {
  align-self: center;
  width: 20vh;
  height: 20vh;
  background-color: #0f0;
}

.testment {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.block {
  margin: 2vh 2vw;
  border: 1px solid #f00;
}
<div class="block_img"></div>
<div class="testment">
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, at minima laudantium illo! Nobis minus non sit, voluptate natus id.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde recusandae assumenda debitis et vel iure provident voluptatum, dolorum sint ullam iste sequi. Qui aliquid ipsa reprehenderit cumque, sapiente, dolorum tempore iste tenetur commodi
    distinctio vero. Consectetur quis odit veritatis!</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae maiores voluptates soluta quam, nam quibusdam!</div>
</div>

Страница с контентом ограничена по размерам областью видимости экрана устройства.

Вопрос - Как задать CSS что б салатовый блок, всегда был по центру экрана (Через position:absolute, position:fixed не предлагать) а его размещение не влеяло на нижний блок со списком?

центрирование элементов

css css3 центрирование
Источник: Stack Overflow на русском

Ответы

▲ 1

Ну вот так получилось через grid

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  align-items: center;
  background-color: #000;
  overflow: hidden;
  color: #fff;
  font-family: sans-serif;
}
body:before{
  content:"";
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  background-color: #00f;
  z-index: 10;
}
body:after{
  content:"";
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #00f;
  z-index: 10;
}

.block_img {
  width: 20vh;
  height: 20vh;
  background-color: #0f0;
  grid-row-start: 1;
  grid-column-start: 1;
  margin: 0 auto;
}

.testment {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 4;
  grid-row-start: 1;
  grid-column-start: 1;
}

.block {
  margin: 2vh 2vw;
  border: 1px solid #f00;
}
<div class="block_img"></div>
<div class="testment">
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, at minima laudantium illo! Nobis minus non sit, voluptate natus id.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde recusandae assumenda debitis et vel iure provident voluptatum, dolorum sint ullam iste sequi. Qui aliquid ipsa reprehenderit cumque, sapiente, dolorum tempore iste tenetur commodi
    distinctio vero. Consectetur quis odit veritatis!</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae maiores voluptates soluta quam, nam quibusdam!</div>
</div>