DEV Community

Discussion on: 1 line css to center object

Collapse
sankthomas profile image
Thomas Sankara

I have another one that I used to use before I learned flexbox and grid...

<!-- HTML -->
<p class="p">This is a paragraph</p>

/* CSS */
.p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Mostly I used to do this when the page I build will fit the user's device screen without any scrollbars. (As in height: 100vh and width: 100%;)

Collapse
ifelseolga profile image
Olga Lapovsky

Thanks it just helped me to center a div. 😃

Collapse
sankthomas profile image
Thomas Sankara

Niiice. You're welcome Olga