Vertically Centering Text and HTML Elements With CSS

Vertically centering something in CSS is not as easy as you'd think, and until we got tools like , it was really hard. Fortunately, vertically centering something within a container is quite easy now. Let's look at how to accomplish it. flexbox Vertically Centering an Item in CSS Let's assume we have some simple HTML with a div called within a container called . Our HTML looks like this: .item #container Hello When we create this, our output is going to look like the example below. By default, will be full width and at the top of the container. .item To rectify this, and to center our div containing the text, "Hello", we need to make a flexbox. To simply center the flexbox vertically, we only have to update our container CSS to look like this: .item #container #container { display: flex; align-items: center; } Resulting in this outcome: If we want it to be both centered vertically and also centered horizontally, then we would update our CSS to look like this: #container #container { display: flex; align-items: center; justify-content: center; } Resulting in the following: . A demo showing the full code for this example can be found on codepen here Centering an Item in the Middle of the Screen With CSS. This works fine if we want to center something within a div element, but what if we want to center something exactly in the center of the user's screen? If we want to center something in the middle of a user's screen with CSS, we can still use , we just need to adjust the width of the container. This time, we'll make have a width of and a height of . flexbox #container 100vw 100vh These two units tell the browser to make the width and height match the full width and height of the viewport. We can still keep the same HTML: #container Hello However, our CSS for the element will now be adjusted to add in this new width and height. I've also added , so that doesn't overflow and cause scrollbars to appear: #container box-sizing: border-box #container #container { box-sizing: border-box; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } Again, . a demo of this example can be found on codepen here Conclusion Centering items in CSS is really easy with flexbox. If you want to learn more about CSS, I've created an . Not only does it let you center items really easily, but the guide shows you how different flexbox properties work. interactive guide to flexbox . If you want more CSS content, you can find it here

Vertically Centering Text and HTML Elements With CSS

Too Long; Didn't Read

Company Mentioned

@smpnjn

RELATED STORIES