数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 居中 div 元素？
使用 CSS 居中 div 元素是前端开发中最重要的方面之一，可以通过多种 CSS 属性实现。
在本文中，我们使用了 5 种方法来使用 CSS 居中 div。我们有一些父 div 元素和一些子 p 元素，我们的任务是使用 CSS 居中 div 元素。
使用 CSS 居中 div 元素的方法
以下列出了本文将讨论的使用 CSS 居中 div 元素的方法，并附带分步说明和完整的示例代码。
使用 margin 属性居中 div
在这种方法中，我们使用了 margin 属性来使用 CSS 居中 div。CSS margin 属性在元素的外围创建空间。此方法水平居中 div。
- 我们使用了 “margin-left: auto;” 和 “margin-right: auto;” 属性，它们将左右边距设置为自动，从而使 div 居中。
- 我们使用了 “margin-inline: auto;” 属性，它是 margin-left 和 margin-right 属性的替代方法。
示例
这是一个完整的示例代码，实现了上述使用 margin 属性使用 CSS 居中 div 的步骤。
<html>
<head>
<title>
Center a div using margin Properties
</title>
<style>
div {
border: 2px solid green;
padding: 10px;
}
.ele {
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
.ele1 {
margin-left: auto;
margin-right: auto;
}
.ele2 {
margin-inline: auto;
}
</style>
</head>
<body>
<h3>
Center a div using margin properties.
</h3>
<h4>Using margin-left and margin-right Property</h4>
<div class="ele ele1">
</div>
<br>
<h4>Using margin-inline Property</h4>
<div class="ele ele2">
</div>
</body>
</html>
使用 flex 属性居中 div
在这种方法中，我们使用了 CSS flex 属性来居中 div。我们将在示例 1 中居中单个 flex 项目，并在示例 2 中居中多个 flex 项目。
- 我们使用了 “display: flex;” 来创建弹性容器。
- 我们使用了 “justify-content: center;” 来水平居中 div。
- 我们使用了 CSS height 属性来设置 div 的高度，并使用 “align-items: center;” 垂直居中 div。
- 对于对齐多个项目，我们使用了 “flex-direction: column;” 属性，它垂直显示 flex 项目。
示例 1
在此示例中，我们使用 justify-content 和 align-items 属性居中了一个 div。
<html>
<head>
<title>
Center a div using flex property
</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
border: 2px solid green;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
</style>
</head>
<body>
<h3>
Center single div item using
flex properties.
</h3>
<p>
We have used justify-content to center the
item horizontally and align-items to center the
item vertically.
</p>
<div class="container">
<p class="item"></p>
</div>
</body>
</html>
示例 2
在此示例中，我们居中了多个 flex 项目，并使用 flex-direction:column 垂直显示它们。还可以使用 flex-direction 的其他属性值，如 **row**、**row-reverse** 和 **column-reverse**。
<html>
<head>
<title>
Center a div using CSS properties
</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
padding:10px;
background-color: #04af2f;
color: white;
margin: 2px;
text-align: center;
letter-spacing: 1px;
border: 1px solid black;
}
</style>
</head>
<body>
<h3>
Center Multiple Items Using flex Property.
</h3>
<p>
We have used flex-direction property to
display items vertically.
</p>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
使用 grid 属性居中 div
在这种方法中，我们使用了三种不同的 CSS grid 布局来居中 div 元素，如下所示。CSS grid 布局非常适合创建网页的整体布局。
使用 place-items 属性
我们使用了 “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 属性
我们使用了 grid-row 和 grid-column 属性来居中 div。我们使用了以下步骤来居中 div
- 我们使用了 “grid-template-rows” 和 “grid-template-columns” 定义了三行三列，其中第一行和第三行以及第一列和第三列占据可用空间的一部分，第二行和第二列设置为自动。
- 我们使用了 “grid-row: 2;” 将 div 放置在网格的第二行。
- 我们使用了 “grid-column: 2;” 将 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 属性
我们使用了 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>
在视口中居中 div
在这种方法中，我们居中了不在 div 容器内的 div 元素。
- 我们使用了 “position:fixed” 属性来固定视口中的 div。
- 然后，我们使用了 “inset: 0px;” 属性，它是设置 CSS top、left、right 和 bottom 属性的简写属性。
- 最后，我们使用了 “margin: auto;” 属性，它与上述两个属性一起居中 div 元素。
示例
这是一个完整的示例代码，实现了上述在视口中居中 div 的步骤。
<html>
<head>
<title>
Center a div using CSS properties
</title>
<style>
.container {
position: fixed;
width: 10rem;
height: 5rem;
background-color: rgb(109, 224, 244);
border: 2px solid green;
inset: 0px;
margin: auto;
padding:5px;
}
</style>
</head>
<body>
<h3>
Centering item inside viewport.
</h3>
<div class="container">
</div>
</body>
</html>
使用 CSS 属性居中文本
在这种方法中，我们使用了上述方法来居中 flex 项目，并使用 text-align 属性将文本内容放置在中央。
- 我们使用了 “text-align: center;” 来居中 div 内的文本，并使用上述方法使用 flex 属性居中 div。
示例
这是一个完整的示例代码，实现了上述使用 CSS text-align 属性居中文本的步骤。
<html>
<head>
<title>
Centering text
</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
p {
border: 2px solid green;
padding: 10px;
width: 150px;
}
</style>
</head>
<body>
<h3>
Center Text with flex box
Using text-align Property.
</h3>
<div class="container">
<p>
In this example, we have placed
text at the center along with the div.
</p>
</div>
</body>
</html>
结论
使用 CSS 居中 div 是一项重要的任务，也是一个非常简单的过程，可以通过多种 CSS 属性实现。在本文中，我们使用了五种方法，分别是使用 **margin** 属性、使用 **flex** 属性、使用 **grid** 布局、在视口中居中以及最后使用 **text-align** 属性居中文本。可以根据用户的需求使用任何一种方法。
12K+ 阅读量
