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

百变鹏仔 4周前 (09-21) #HTML

文章标签如何使用

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

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

为了使 div 垂直居中，我们将使用 flex 属性，align-items 属性。该值设置为 center 以使 div 居中。在下面的示例中，我们使用具有中心值的align-items属性将其中一个div设置为居中对齐 -

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

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

立即学习“前端免费学习笔记（深入）”；

<div class="demo2">   @@##@@   <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">      @@##@@      <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">      @@##@@      <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>

文章推荐

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

示例

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8