How to Center a Div. | CSS Flex Properties
How to Center a Div. | CSS Flex Properties
This video provides a tutorial on how to center a `div` using CSS Flexbox properties (0:07). The presenter explains that Flexbox makes it easy to align items in a row or column, supporting both horizontal and vertical layouts (1:21-1:35).
Key Flexbox properties discussed and demonstrated include:
`display: flex;`: Defines a flex container (1:58).
`justify-content`: Distributes items evenly across available space. Different values like `space-between` (2:05), `space-around` (4:28), and `space-evenly` (5:16) are shown, illustrating how they affect spacing between items.
`align-items`: Aligns items along the cross-axis. Examples include `center` (5:26), `flex-start` (5:35), and `flex-end` (5:41), demonstrating how to position items at the center, top, or bottom of the container.
The core of the tutorial demonstrates that to center a `div`, you need to apply three specific CSS properties to its parent element (in this case, the `body`):
`display: flex;` (6:21)
`justify-content: space-evenly;` (6:22)
`align-items: center;` (6:23)
The presenter provides a practical demonstration using an `index.html` and `style.css` file to show these properties in action (2:35-6:11). The video concludes by reiterating that these three lines of code applied to the parent are essential for centering a `div` (6:21-7:08).