如何在 HTML 和 CSS 中使 Div 居中？

百变鹏仔 3个月前 (09-19) #CSS

文章标签如何在

虽然这是 web 开发中的典型活动，但将 div 居中对于新手来说可能会很困难。理解使 div 水平、垂直或两者居中的多种技术至关重要。这篇文章将引导您完成多种方法来完成此任务，并附有解释和代码示例。

简介

制作美观且平衡的设计的一个重要组成部分是将网页上的组件居中。无论您创建的用户界面有多复杂，即使对于简单的网页，能够将 div 居中也是至关重要的。这篇文章将讨论在 html 和 css 中将 div 居中的多种方法（包括传统方法和前沿方法）。

为什么要让 div 居中？

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

将 div 居中可以增强网页的布局和可读性。它有助于创建平衡的设计并确保用户可以轻松访问内容。无论是文本框、图像还是表单，将这些元素居中可以使您的网站看起来更加专业和有条理。

使 div 居中的方法

在 html 和 css 中，有多种方法可以使 div 居中。我们将介绍以下技术：

使用边距：自动；

使用 flexbox

使用网格布局

使用 css 变换

使用文本对齐

使用仓位和负保证金

每种方法都有其优点和用例。让我们通过详细的解释和代码示例来深入研究每一个。

使用边距：自动；

边距：自动；方法是使 div 水平居中的最简单方法之一。它的工作原理是将左右边距设置为自动，从而均匀分配 div 两侧的可用空间。

水平居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div horizontally</title><style>        .center-horizontally {            width: 50%;            margin: 0 auto;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="center-horizontally">        this div is centered horizontally.    </div>

上面的例子中，div使用margin: 0 auto;水平居中。 div 的宽度设置为 50%，因此它占据了一半的可用空间，两侧边距相等。

垂直居中

要使用 margin: auto; 使 div 垂直居中，需要设置父容器和 div 本身的高度。这种方法不像水平居中那么简单。

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div vertically</title><style>        .container {            height: 100vh;            display: flex;            justify-content: center;            align-items: center;        }        .center-vertically {            width: 50%;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="container">        <div class="center-vertically">            this div is centered vertically.        </div>    </div>

在此示例中，我们使用 flex 容器将 div 垂直居中。高度：100vh；确保容器占据视口的整个高度。显示：flex;、justify-content:center;、align-items:center;属性在容器内水平和垂直对齐 div。

使用 flexbox

flexbox 是一种现代布局模型，提供了一种在容器中的项目之间对齐和分配空间的有效方法。它简化了水平和垂直居中元素的过程。

水平居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div horizontally with flexbox</title><style>        .flex-container {            display: flex;            justify-content: center;        }        .center-flex-horizontally {            width: 50%;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="flex-container">        <div class="center-flex-horizontally">            this div is centered horizontally with flexbox.        </div>    </div>

在这个例子中，我们使用 flexbox 将 div 水平居中。显示屏：柔性；并调整内容：中心；容器的属性确保 div 居中。

垂直居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div vertically with flexbox</title><style>        .flex-container {            display: flex;            justify-content: center;            align-items: center;            height: 100vh;        }        .center-flex-vertically {            width: 50%;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="flex-container">        <div class="center-flex-vertically">            this div is centered vertically with flexbox.        </div>    </div>

在这个例子中，我们使用 flexbox 使 div 垂直居中。对齐项目：居中；容器的属性确保 div 在容器内垂直居中。

水平和垂直居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div with flexbox</title><style>        .flex-container {            display: flex;            justify-content: center;            align-items: center;            height: 100vh;        }        .center-flex {            width: 50%;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="flex-container">        <div class="center-flex">            this div is centered both horizontally and vertically with flexbox.        </div>    </div>

在这个例子中，我们同时使用 justify-content: center;和对齐项目：居中；将 div 在容器内水平和垂直居中。

使用网格布局

css 网格布局是另一个强大的布局系统，可以让您轻松创建复杂的布局。它提供了一种将元素居中的简单方法。

水平居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div horizontally with grid</title><style>        .grid-container {            display: grid;            place-items: center;            height: 100vh;        }        .center-grid-horizontally {            width: 50%;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="grid-container">        <div class="center-grid-horizontally">            this div is centered horizontally with grid.        </div>    </div>

在这个例子中，我们使用css网格布局来水平居中div。地点项目：中心；属性使 div 水平和垂直居中，但由于我们专注于水平居中，所以它达到了预期的结果。

垂直居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div vertically with grid</title><style>        .grid-container {            display: grid;            place-items: center;            height: 100vh;        }        .center-grid-vertically {            width: 50%;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="grid-container">        <div class="center-grid-vertically">            this div is centered vertically with grid.        </div>    </div>

在这个例子中，我们使用 css 网格布局将 div 垂直居中。地点项目：中心；属性使 div 水平和垂直居中。

水平和垂直居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div with grid</title><style>        .grid-container {            display: grid;            place-items: center;            height: 100vh;        }        .center-grid {            width: 50%;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="grid-container">        <div class="center-grid">            this div is centered both horizontally and vertically with grid.        </div>    </div>

在这个例子中，place-items: center;属性使 div 在容器内水平和垂直居中。

使用 css 变换

css transform 允许您操纵元素的外观和位置。您可以使用transform属性将div居中。

水平居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div horizontally with transform</title><style>        .center-transform-horizontally {            width: 50%;            position: absolute;            left: 50%;            transform: translatex(-50%);            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="center-transform-horizontally">        this div is centered horizontally with transform.    </div>

本例中，左边：50%；和变换：translatex(-50%)；属性使 div 水平居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。

垂直居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div vertically with transform</title><style>        .center-transform-vertically {            width: 50%;            position: absolute;            top: 50%;            transform: translatey(-50%);            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="center-transform-vertically">        this div is centered vertically with transform.    </div>

本例中，顶部：50%；和变换：translatey(-50%)；属性使 div 垂直居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。

水平和垂直居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div with transform</title><style>        .center-transform {            width: 50%;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="center-transform">        this div is centered both horizontally and vertically with transform.    </div>

在此示例中，顶部：50%;，左侧：50%;，以及变换：translate(-50%, -50%);属性使 div 水平和垂直居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。

使用文本对齐

text-align 属性通常用于使文本居中，但它也可以用于使容器内的块元素居中。

水平居中

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>center a div horizontally with text-align</title><style>        .container {            text-align: center;        }        .center-text-align {            display: inline-block;            width: 50%;            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="container">        <div class="center-text-align">            this div is centered horizontally with text-align.        </div>    </div>

在这个例子中，容器有text-align: center;，div有display: inline-block;。这将使 div 在容器内水平居中。

使用仓位和负保证金

使用位置和负边距是使 div 水平和垂直居中的另一种方法。

水平和垂直居中

    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Center a Div with Position and Negative Margin</title><style>        .center-position {            width: 50%;            height: 200px;            position: absolute;            top: 50%;            left: 50%;            margin-top: -100px; /* Half of the height */            margin-left: -25%; /* Half of the width */            background-color: #f0f0f0;            text-align: center;            padding: 20px;            border: 1px solid #ccc;        }    </style><div class="center-position">        This div is centered both horizontally and vertically with Position and Negative Margin.    </div>

本例中，顶部：50%；左：50%；属性将 div 定位在容器的中间。顶部边距：-100px；左边距：-25%；属性通过分别偏移其高度和宽度的一半来使 div 居中。

结论

在 html 和 css 中将 div 居中可以使用多种方法来完成。每种技术都有其优点并适用于不同的场景。无论您选择使用边距：auto;、flexbox、网格布局、css 变换、文本对齐还是位置和负边距，了解这些方法都将帮助您创建平衡且具有视觉吸引力的设计。

通过掌握这些技术，您可以增强网页的布局和可读性，使它们更加用户友好和专业。尝试这些方法，找到最适合您的需求和项目的具体要求的方法。

参考资料

mdn web 文档 - css：级联样式表

css-tricks - flexbox 完整指南

css-tricks - 网格完整指南

w3schools - css

mdn web 文档 - 使用 css 灵活框

mdn 网络文档 - css 网格布局

通过遵循本指南，无论布局多么复杂，您都可以放心地将 div 居中。快乐编码！

文章推荐

如何在 HTML 和 CSS 中使 Div 居中？

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写