数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何使用 CSS 网格属性居中一个 <div>？
要使用 CSS 网格 属性居中一个 div，我们将使用 CSS 网格布局及其属性。CSS 网格是 CSS 中最广泛使用的元素之一，类似于 flexbox。CSS 网格是 Web 上的二维布局系统。我们可以借助网格将元素放置在行、列或两者中。
在本文中，我们将了解如何仅使用 CSS 网格属性来居中 div。我们将为此使用三种方法。
使用 CSS 网格属性居中 div 的方法
使用 place-items 属性居中 div
在这种方法中，为了使用 CSS 网格属性居中 div，我们使用了 "place-items: center;"，它可以居中 div。它可以被认为是 align-items 和 justify-content 属性的简写属性。
示例
这是一个完整的示例代码，实现了上述步骤，使用 CSS place-items 属性来居中 div。
<html>
<head>
<title>
Center a div using CSS properties
</title>
<style>
.container {
display: grid;
place-items: center;
height: 100vh;
}
.item {
border: 2px solid green;
padding: 10px;width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
</style>
</head>
<body>
<h3>
Center item using grid properties.
</h3>
<p>
We have used CSS <strong>place-items
</strong> property to center the div.
</p>
<div class="container">
<p class="item"></p>
</div>
</body>
</html>
使用 grid-row 和 grid-column 属性居中 div
我们使用了 grid-row 和 grid-column 属性，它们可以居中 div。我们使用了以下步骤来居中 div
- 我们使用了 "grid-template-rows" 和 "grid-template-columns"，它们定义了三行三列，其中第一行和第三行以及第一列和第三列占据可用空间的一部分，第二行和第二列设置为自动。
- 我们使用了 "grid-row: 2;"，它将 div 放置在网格的第二行。
- 我们使用了 "grid-column: 2;"，它将 div 放置在网格的第二列。
- 我们使用了 background-color、border、height 和 width 属性来设置 div 元素的样式。
示例
这是一个完整的示例代码，实现了上述步骤，使用 CSS grid-row 和 grid-column 属性来居中 div。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Center Div with CSS Grid</title>
<style>
.container {
display: grid;
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
height: 100vh;
}
.item {
grid-row: 2;
grid-column: 2;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
border: 2px solid green;
}
</style>
</head>
<body>
<h3>
Center Item Using grid Property.
</h3>
<p>
We have used CSS <strong> grid-row
</strong> and <strong>grid-column
</strong> property to center the div.
</p>
<div class="container">
<p class="item"></p>
</div>
</body>
</html>
使用 place-self 属性居中 div
在这种方法中，我们使用了 place-self 属性，它可以同时水平和垂直居中 div。它可以用作 align-self 和 justify-self 属性的简写属性。
示例
这是一个完整的示例代码，实现了上述步骤，使用 CSS place-self 属性来居中 div。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Center div using place-self
</title>
<style>
.container {
display: grid;
height: 100vh;
}
.item {
place-self: center;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
border: 2px solid green;
}
</style>
</head>
<body>
<h3>
Center Item Using grid Property.
</h3>
<p>
We have used CSS <strong>place-self
</strong> property to center the div.
</p>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
结论
使用 CSS 居中 div 是一项重要的任务，这是一个非常简单的过程，可以使用各种 CSS 属性来实现。在本文中，我们使用了 CSS 网格布局，使用三种不同的方法来居中 div，分别是使用 **place-items** 属性、**grid-row 和 grid-column** 属性以及 **place-self** 属性。
更新于：2024年8月9日
19K+ 次浏览
广告