Semantic UI - Vertical centering a div

Question

Are there any known ways to center a <div> tag using Semantic UI's web development framework, without adding my own CSS styles?

I have tried several position-related tags in the documentation, such as <div class="centered grid'>, however these only work for horizontal centering.

This is not a case of challenging implementation, I am just surprised something as common as vertical centering isn't included within a web development framework, and I am curious if my Google searches and eyes have glazed over it. I would prefer to comply to the framework styles before creating custom styles. I know that there are several methods to implement my own vertical centering (this is the least preferable option in my opinion to implement), however I would prefer to use a class from the framework.

Answer 1

As per Semantic UI v2.2.2, you can force vertical alignment in the middle by adding middle aligned class(es). It affects the following elements:

• table, its rows and cells,
• grid, its rows and columns,
• image,
• list and item with an image,
• modal dialog content.

You cannot set vertical alignment in the middle that way to an arbitrary div element, outside any of these structures.

Otherwise, some other Semantic UI elements align their content vertically in the middle by default:

• header or message with an icon or image,
• circular segment,
• step,
• button etc.