如何使用 CSS 在所有浏览器中使 div 元素垂直居中?

要使用 CSS 在所有浏览器中使 div 元素垂直居中，请使用 Flexbox。CSS3 提供了另一种布局模式"弹性框"(Flexible Box)，通常称为 Flexbox。使用此模式，您可以轻松为复杂的应用程序和网页创建布局。与浮动不同，Flexbox 布局可以完全控制框的方向、对齐方式、顺序和大小。

<div> 标签是 HTML 中元素的容器。我们可以在 div 中放置任何类型的内容。首先添加元素，然后使用 CSS 为其设置样式。现在我们只能使 div 垂直居中，但可以水平居中。

要使 div 垂直居中，我们将使用 flex 属性和 align-items 属性。将值设置为 center 可以使 div 居中。在下面的例子中，我们使用 align-items 属性将其中一个 div 设置为居中对齐，其值为 center −

demo2 {
   display: flex;
   align-items: center;
   height: 60%;
} 

然后将内容设置在同一个 div demo2 中以居中对齐 -

<div class="demo2">
   <img src="https://www.cainiaomax.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> 

示例

现在让我们看一下使用 CSS 在所有浏览器中垂直居中 div 元素的示例 -

<!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.cainiaomax.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.cainiaomax.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>

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/