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 <div id="container"> <div class="item"> Hello </div> </div> 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 <div id="container"> <div class="item"> Hello </div> </div> 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
