Center Horizontally and Vertically

In the above embedded video, you will learn how to center elements vertically and horizontally by using simple proven CSS.

<!DOCTYPE html>
<html>
<head>
<style>

#p1, #p2 {
    border: solid 3px #ff63fa;
    font-size: 2em;
    background-color: greenyellow;
}

#p1 {
    padding: 50px;
    text-align: center;
}

#p2 {
    color: #ff5678; 
    height: 200px;
    display: flex; /* or grid */
    justify-content: center;
    align-items: center;
}

.parent {
    border: 8px solid green;
    height: 200px;
    display: flex; /* or grid */
    justify-content: center;
    align-items: center;
}

.child {
    font-size: 2em;
    color: #ff63fa;
}
</style>
</head>
<body>

<p id="p1">Example One</p>

<p id="p2">Example Two</p>

<div class="parent">
    <div class="child">Example Three</div>
</div>

</body>
</html>