Vertical Centering The lack of good ways to vertically center elements in CSS has been a dark blemish on its reputation for pretty much its entire existence. What makes matters worse is the techniques that do work for vertical centering are obscure and unintuitive, while the obvious choices (like vertical-align:middle) never seem to work when you need them. The current landscape of ranges from negative margins to display:table-cell to ridiculous hacks involving full-height pseudo-elements. Yet even though these techniques sometimes get the job done, they don’t work in every situation. What if the thing you want to center is of unknown dimensions and isn’t the only child of its parent? What if you could use the pseudo-element hack, but you need those pseudo-elements for something else? With Flexbox, you can stop worrying.
You can align anything (vertically or horizontally) quite painlessly with the align-items, align-self, and justify-content properties.
![Text Text](/uploads/1/2/4/1/124134923/367248405.png)
I have a div element which contains text, and I want to align the contents of this div vertically center. Here is my div style.
Centering with CSS can be a challenge for beginning web designers because there are so many different ways to accomplish this one visual style. While the variety of methods may be nice or seasoned web developers who know that not all techniques work on every element, this can be terribly challenging for newer web professionals since the wide variety of methods means they need to know when to use which approach. The best thing to do is to gain an understanding of a few approaches. As you begin to use them, you will learn which method works best in which instances. Many (many) years ago, web designers could use the element to center images and text, but that is now deprecated and no longer supported in modern web browsers. This means you must avoid using this HTML element if you want your pages to display properly and conform to modern standards!
The reason this element was deprecated is, in large part, because modern websites should have a clear separation of structure and style. HTML is used to create structure while CSS dictates style. Because centering is a visual characteristic of an element (how it looks rather than what it is), that style is handled with CSS, not HTML. This is why adding a tag to the HTML structure is incorrect according to modern web standards. Instead, we will turn to CSS to get our elements nice and centered.
When centering text with the text-align property, remember that it will be centered within its containing element and not necessarily centered within the full page itself. Also, remember that center-justified text can be difficult to read for large blocks of content, so use this style sparingly.
Headlines and small blocks of text, like teaser text for an article or other content, are often easy to read and fine when centered, but larger blocks of text, like the full article itself, would be challenging to consume if the content was fully center justified. Remember, when it comes to website text!