How can I vertically center a div element for all browsers using CSS?
How can I vertically center a div element for all browsers using CSS?
Ask by Utpal Vishwas
Updated 26 Apr 2023
To vertically center a div element for all browsers using CSS, you can use the following CSS code:
In this code, the display: flex; property sets the parent element to use flexbox layout, which provides an easy way to center elements both horizontally and vertically. The justify-content: center; property centers the child elements horizontally, while the align-items: center; property centers the child elements vertically.
You can apply this CSS code to any parent element that contains the div element that you want to vertically center. Just replace the .parent selector with the appropriate selector for your HTML code.
Note that flexbox layout is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. For older browsers that don't support flexbox layout, you may need to use other CSS techniques, such as table display or absolute positioning. However, these techniques may not be as flexible or easy to use as flexbox layout.