Блок по центру страницы

by Евгений

HTML

<div class="block-vertical-middle">Блок по центру страницы</div>

<div class="popup--centered_overlay">
    <div class="popup--centered">Блок по центру страницы</div>
</div>

CSS

.block-vertical-middle {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  font-size: 14px; /* font-size: 1rem; */
  border: 1px solid #f00;
}

.popup--centered_overlay {
    text-align: center;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.2);
  }
  .popup--centered_overlay::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .popup--centered {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }