Centering in CSS: A Complete Guide

https://css-tricks.com/centering-css-complete-guide/

Useful references

• CSS Box Model visualization
• CSS3 UI: box-sizing property
• * { box-sizing: border-box } FTW

Center a div inside another div

.dialog_overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.popup {
    width: 320px;
    height: 280px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -140px;
    margin-left: -160px;
    background-color: red;
    border-radius: 5px;
    z-index: 10;
}

.container {
   background: yellow;
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

.centered-div {
   width: 80%;
   height: 190px;
   margin: 10px;
   padding: 5px;
   background: blue;
   color: white;
}