Skip to main content

How to Center a <div>

Made & Published by: AT Products LLC.
Published on: October 23rd, 2024.

This article contains information on how to center a <code> using CSS, horizontally and vertically, within HTML. The sole purpose of this article is to annoy Venen Jean, so have fun with this little payback.

Horizontally Aligning

Horizontally aligning a <div> is more easier than vertically aligning a <div>.

Auto Margin

A margin sets the space outside the selected element. Setting the element's left and right margin to auto, automatically makes it centered horizontally.

Your code should contain margin-left: auto; and margin-right: auto;, and it's display must be set to block using display: block;. [1]

Flexbox

You can also use Flexbox to center your <div> using display: flex; and justify-content: center;. [4]

Text Center

To center not necessarily a <div>, but any text, use text-align: center; for its property. [1]

Vertically Aligning

Vertically aligning a <div> is harder than horizontally aligning.

Using Position and Transform

Combining position: relative; for your parent container, and using position: absolute;, top: 50%;, and transform: translateY(-50%); for your child container. This can align the child container in a vertical direction. [2]

Padding

Top and bottom padding can vertically center text. [1]

Line Height

For line-height to vertically align text, it must be the same height as the container. If your text is above one line, you can use line-height: 1.5; on the <p> tag. [1]

Aligning in Both Directions

This section will show how a <div> can be both horizontally and vertically aligned.

Flexbox

You can use Flexbox to center your <div> using display: flex;, justify-content: center;, align-items: center;, and setting a height on a parent container. [4]

Using Position and Transform

Combining position: relative; for your parent container, and using position: absolute;, top: 50%;, left: 50%;, and transform: translate(-50%, -50%); for your child container. This can align the child container in all directions. [2]

Padding

Top and bottom padding, combined with text-align: center;, can horizontally and vertically align text. [1]

Line Height

For line-height to vertically align text, it must be the same height as the container. You can also combine this with text-align: center;. If your text is above one line, you can use line-height: 1.5; on the <p> tag. [1]

Sources

[1]
W3Schools. “CSS Layout - Horizontal & Vertical Align.” Www.w3schools.com, www.w3schools.com/css/css_align.asp. Accessed 14 Oct. 2024.

[2]
“How to Center an Element Vertically.” Www.w3schools.com, www.w3schools.com/howto/howto_css_center-vertical.asp. Accessed 14 Oct. 2024.

[3]
Abdu. “How Can I Vertically Align Elements in a Div?” Stack Overflow, 17 Sept. 2008, stackoverflow.com/questions/79461/how-can-i-vertically-align-elements-in-a-div. Accessed 14 Oct. 2024.

[4]
“How to Center a <div> Using Flexbox Property of CSS.” GeeksforGeeks, GeeksforGeeks, 16 Sept. 2024, www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/. Accessed 14 Oct. 2024.