Centering elements in CSS can sometimes be a bit confusing, especially for beginners. However, with a few simple techniques, centering in CSS can be achieved easily. In this complete guide, we’ll cover the different ways to center elements both horizontally and vertically.
Centering Horizontally
To center an element horizontally, we can use the text-align property for inline elements, or the margin property for block-level elements.
Inline Elements
To center an inline element horizontally, we can set the text-align property of its parent container to center. Here’s an example:
.container {
text-align: center;
}span {
display: inline-block;
}
In this example, we set the text-align property of the .container class to center. We then set the display property of the span element to inline-block to make it a block-level element that can be centered.
Block-Level Elements
To center a block-level element horizontally, we can use the margin property. We set the left and right margins to auto and specify a width for the element. Here’s an example:
.container {
width: 50%;
margin: 0 auto;
}
In this example, we set the width property of the .container class to 50%. We then set the left and right margins to auto to center the element.
Centering Vertically
Centering an element vertically can be a bit trickier, but there are a few ways to achieve it.
Flexbox
One way to center an element vertically is by using flexbox. We set the display property of the parent container to flex and use the align-items property to center the child element vertically. Here’s an example:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}.box {
width: 200px;
height: 200px;
}
In this example, we set the display property of the .container class to flex. We then use the align-items property to center the child element vertically. We also set the justify-content property to center to center the child element horizontally. Finally, we set the height property of the .container class to 100vh to make it the full height of the viewport.
Transform
Another way to center an element vertically is by using the transform property. We set the position property of the parent container to relative, and the position property of the child element to absolute. We then use the transform property to center the child element vertically. Here’s an example:
.container {
position: relative;
height: 100vh;
}.box {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 200px;
height: 200px;
}
In this example, we set the position property of the .container class to relative. We then set the position property of the .box class to absolute. We use the top property to position the element vertically in the center. We then use the transform property to adjust the element’s position. Finally, we set the height property of the .container class to 100vh to make it the full height of the viewport.
Conclusion
Centering elements in CSS can be achieved in a few different ways. Whether you’re trying to center an element