Page 103 - CSS

.center {
position: absolute;
background: #ccc;

left: 50%;
width: 150px;
margin-left: -75px; /* width * -0.5 */

top: 50%;
height: 200px;
margin-top: -100px; /* height * -0.5 */
}

Horizontal centering with only fixed width

You can center the element horizontally even if you don't know the height of the content:

HTML

<div class="center">
Center only horizontally
</div>

CSS

.center {
position: absolute;
background: #ccc;

left: 50%;
width: 150px;
margin-left: -75px; /* width * -0.5 */
}

Vertical centering with fixed height

You can center the element vertically if you know the element's height:

HTML

<div class="center">
Center only vertically
</div>

CSS

.center {
position: absolute;
background: #ccc;

top: 50%;
height: 200px;

https://riptutorial.com/ 81