Можно ли использовать flexbox css для создания вертикального и горизонтального сообщения наложения страницы

Question

Кажется, достаточно просто центрировать сообщение по вертикали и горизонтали с помощью css flexbox, но я изо всех сил пытаюсь использовать его для создания полного наложения страницы.Flexbox всегда выталкивает другой контент.Может быть, flex не то, что нужно использовать, и я должен придерживаться более старого css?

Наложение должно отображаться: нет;или скрытый, чтобы его можно было показать в соответствующее время с помощью javascript.

<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>

Я добавляю этот html к телу, когда это необходимо.Я полагаю, что это может быть удалено вместо скрытого, а затем снова добавлено при необходимости.

Answer 1

Полагаю, это то, что вы хотите.

body {
  padding:0;
  margin:0;
  font-family:monospace;
  font-size:24px;
}

p {
    text-indent:40px;
}

#overlay {
  background:magenta;
  height:30vh;
  width:30vw;
  display:flex;
  align-items:center;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

#overlay::before {
  content:'';
  position:fixed;
  background:transparent;
  height:100vh;
  width:100vw;
  left:-35vw;
}

#overlay-message {
  color:#fff;
  font-family:sans-serif;
  font-size:16px;
  text-align:center;
  width:100%;
}

<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

С небольшим javascript он исчезает при нажатии на него.

function hide () {
  document.getElementById("overlay").style.display = "none";
} 

document.getElementById("overlay").onclick = function() {hide()};

Answer 2

body {
  overflow:hidden;
  padding:0;
  margin:0;
}

#overlay {
  background:magenta;
  height:100vh;
  width:100vw;
  display:flex;
  justify-content:center;
  align-items:center;
}

#overlay-message {
  color:#fff;
  font-family:sans-serif;
  font-size:40px;
}

<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>

Это то, что вы хотите?

или

body {
  padding:0;
  margin:0;
  font-family:monospace;
  font-size:24px;
}

p {
    text-indent:40px;
}

#overlay {
  background:magenta;
  height:30vh;
  width:30vw;
  display:flex;
  align-items:center;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

#overlay-message {
  color:#fff;
  font-family:sans-serif;
  font-size:16px;
  text-align:center;
  width:100%;
}

<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>