如何使用 CSS 将 Div 水平居中

Mia Chevalier

2024年6月16日星期日上午1:36:55

使用 CSS 掌握 Div 对齐

在 CSS 中将元素水平居中是 Web 开发人员遇到的常见任务。无论是对齐按钮、图像还是 div，实现完美对齐有时都很棘手。在本指南中，我们将探索水平居中的各种方法

在另一个内

使用CSS。

通过理解和应用这些技术，您可以确保您的 Web 元素精确定位在您想要的位置。我们将介绍不同的方法，包括 Flexbox、网格和传统方法，让您全面了解这项基本的 CSS 技能。

命令	描述
display: flex;	定义 Flex 容器并启用 Flexbox 布局。
justify-content: center;	将项目在弹性容器内水平居中。
align-items: center;	将项目在弹性容器内垂直居中。
place-items: center;	将项目在网格容器中水平和垂直居中。
transform: translate(-50%, -50%);	将元素移动其自身宽度和高度的 50% 以使其居中。
position: absolute;	相对于其最近的定位祖先来定位元素。
top: 50%;	将元素放置在距其包含元素顶部 50% 的位置。
left: 50%;	将元素定位在距其包含元素左侧 50% 的位置。

使用 Flexbox、网格和传统 CSS 将元素居中

第一个脚本演示了如何居中

使用。通过设置在父容器上，子元素成为弹性项目。这属性将这些项目水平居中，而 align-items: center; 将它们垂直居中。这种方法用途广泛，非常适合动态布局。

在第二个脚本中，我们使用以获得类似的结果。通过应用到父容器和，子元素水平和垂直居中。此方法对于基于网格的布局特别有用。最后，传统方法涉及设置 position: absolute; 在子元素上并使用和和将其置于父级的中心。这种方法对于固定大小的元素是有效的。

使用 Flexbox 将 Div 水平居中

HTML 和 CSS 与 Flexbox

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

使用 CSS 网格将 Div 居中

具有网格布局的 HTML 和 CSS

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

使用 CSS 居中的传统方法

具有自动边距的 HTML 和 CSS

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

居中元件的先进技术

将元素在容器内水平居中的另一种方法涉及使用财产。这种方法对于内联块或内联元素特别有效。通过应用对于父容器，所有子元素将水平居中。但是，此方法不适用于块级元素，除非将它们转换为内联块。

此外，您还可以使用用于使块级元素居中的属性。通过将元素的左右边距设置为自动，您可以将其在其父容器内水平居中。这种技术很简单，并且适用于固定宽度的元素。将这些方法与 Flexbox 和 Grid 等现代 CSS 布局技术相结合，提供了一个全面的工具包，可以根据需要精确地对齐元素。

如何使内联元素居中？
使用在父容器上将内联元素居中。
我可以使用 margin: auto;使块元素居中？
是的，设置左侧和右侧将居中一个块元素。
Flexbox 和 Grid 居中有什么区别？
用于一维布局，而用于二维布局。
如何使用 CSS 将固定宽度元素居中？
使用或者和
我可以使用 Flexbox 将元素垂直居中吗？
是的，使用将元素在弹性容器中垂直居中。
文本是否对齐：居中；适用于块元素？
不，仅适用于内联或内联块元素。
如何使容器中的多个元素居中？
使用和和
什么是地点项目：中心；在网格中？
项目在网格容器中水平和垂直居中。
是否可以在没有 Flexbox 或 Grid 的情况下将元素居中？
是的，使用类似的方法 , ，或者也可以将元素居中。

总结 CSS 居中技术

了解如何使用不同的 CSS 方法将元素水平居中对于创建具有视觉吸引力的 Web 布局至关重要。通过掌握诸如 , ，和开发商可以确保他们的设计既实用又美观。尝试这些方法将有助于更深入地了解 CSS 功能。