How to middle align content with CSS.

Check resources file or read In modern web design, achieving a well-structured layout is essential for a great user experience. One powerful tool at our disposal is Flexbox, a layout model that makes it easy to align and distribute space among items in a container. In this blog post, we’ll explore a couple of practical Flexbox styles that help in centering content both vertically and horizontally. Understanding the CSS Code Let's dive into the provided CSS classes and see how they work: 1. .middleOne .middleOne { display: flex; justify-content: center; flex-direction: column; } display: flex;: This sets the element to use the Flexbox layout model, enabling the use of various Flexbox properties. justify-content: center;: This property centers the flex items along the main axis (which, in this case, is horizontal since the default flex-direction is row). However, since we've set flex-direction: column;, it actually centers the items vertically. flex-direction: column;: By changing the flex direction to column, we stack the flex items vertically. Use Case: The .middleOne class is ideal for centering content vertically within a parent container. This is especially useful for scenarios like centering a login form or an image in the middle of the screen. 2. .middleTwo .middleTwo { display: flex; align-items: center; justify-content: left; } display: flex;: As before, this enables Flexbox on the element. align-items: center;: This centers the flex items along the cross axis (which is vertical in a row direction). In this case, it will align items vertically in the center of the container. justify-content: left;: This aligns the items to the left of the container along the main axis (horizontal). Use Case: The .middleTwo class is useful when you want to center items vertically while keeping them aligned to the left horizontally. This could be perfect for a navigation menu or a sidebar where items should stack vertically but be aligned to the start of the container. Practical Example Let’s see how you can use these classes in an HTML structure. <code><div class="container"> <div class="middleOne"> <h1>Welcome!</h1> <p>This content is centered both vertically and horizontally.</p> </div> <div class="middleTwo"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div> </div> </code>