In the best case scenario, you don’t need to specify a height or min-height on your elements like this because the content of the wrapper will define its height automatically. 33vh will calculate 33% of the screen height and adjust accordingly. To allow you to see where the text sits inside the item wrapper, we have given it a minimum height using viewport units. Here is the important part of the CSS rule for our item wrapper: The paragraph, or content of our item wrapper, is what we want to vertically center. It has a content wrapper we have given a class of item and then our text inside a p element. This is pretty typical of a post excerpt on a blog page, for example. Generosity of soul, sincerity, earnestness and kindness. To be able under all circumstances to practice five thingsĬonstitutes perfect virtue these five things are gravity, To begin, let’s take a look at the HTML structure we are using for the element and the content inside it: See the Pen Centering With CSS by Web Designer Wall ( on CodePen.27486
In the first demo, you’ll find six primary ways of vertically centering content, and one variation to show you how the unit size you choose can make a difference, too.
Understanding how each method works differently and is affected by things like the HTML, browser default style rules and screen size will help you make better decisions and write better code in the long run. Many CSS vertical centering methods force you to write even more code to solve problems the rules create elsewhere, or need media queries to get it to work well at all screen sizes. It is not that it is difficult, but because there are several ways to go about it, figuring out which method is best can be confusing. Getting content to center perfectly within an element and then ensuring it responds properly at different screen sizes is one of the biggest challenges that still face front-end designers.