How to vertically center a div element in all browsers using CSS?-HTML Tutorial-php.cn

How to vertically center a div element in all browsers using CSS?

PHPz

Release： 2023-09-07 16:17:02

forward

655 people have browsed it

How to vertically center a div element in all browsers using CSS?

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.

The

tag 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%;
}

Copy after login

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>

Copy after login

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>

Copy after login

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!