Home >Web Front-end >HTML Tutorial >How to vertically center a div element in all browsers using CSS?
How to vertically center a div element in all browsers using CSS?
- PHPzforward
- 2023-09-07 16:17:02686browse
To vertically center a div element in all browsers using CSS, use Flexbox. CSS3 provides another layout mode, Flexible Box, commonly known as Flexbox. Using this mode, you can easily create layouts for complex applications and web pages. Unlike floats, Flexbox layouts give you complete control over the direction, alignment, order, and size of the box.
Thetag is a container for elements in HTML. We can place any type of content inside a div. First add elements and then style them using CSS. We can now only center the div vertically, but can center it horizontally.
To center the div vertically, we will use the flex attribute, align-items attribute. The value is set to center to center the div. In the example below, we set one of the divs to center alignment using the align-items attribute with the center value -
demo2 {
display: flex;
align-items: center;
height: 60%;
}
Then set the content in the same div demo2 to center align -
<div class="demo2"> <img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg" alt="Archery Tutorial"> <p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a bow and hit a fixed target.</p> </div>
Example
Now let’s see an example of vertically centering a div element using CSS for all browsers -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Div Elements</title>
</head>
<style>
body,
html {
height: 100%;
}
.demo2 {
display: flex;
align-items: center;
height: 60%;
}
.demo1,
.demo2 {
border: 2px solid skyblue;
background-color: blue;
color: white;
}
</style>
<body>
<h1>Archery Tutorial</h1>
<div class="demo1">
<img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"
alt="Archery Tutorial">
<p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a
bow and hit a fixed target.</p>
</div>
<p>Let us now center the div elements: </p>
<div class="demo2">
<img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"
alt="Archery Tutorial">
<p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a
bow and hit a fixed target.</p>
</div>
</body>
</html>
The above is the detailed content of How to vertically center a div element in all browsers using CSS?. For more information, please follow other related articles on the PHP Chinese website!