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

Table of Contents

Example

Archery Tutorial

Home

Web Front-end

HTML Tutorial

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

PHPz

Sep 07, 2023 pm 04:17 PM

css Center vertically div element

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="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"  class="lazy" 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 id="Archery-Tutorial">Archery Tutorial</h1>
   <div class="demo1">
      <img src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"  class="lazy"
      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="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"  class="lazy"
      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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn