如何在 CSS 中居中按钮？

CSS 主要用于为 HTML 网页提供最佳样式。使用 CSS，我们可以指定页面上元素的布局。

有多种方法可以将按钮对齐到网页的中心。我们可以水平和垂直对齐按钮。我们可以使用以下方法来居中按钮：

• text-align: center - 通过将父 div 标签的 text-align 属性值设置为 center。
• margin: auto - 通过将 margin 属性值设置为 auto。
• display: flex - 通过将 display 属性值设置为 flex，将 justify-content 属性值设置为 center。
• display: grid - 通过将 display 属性值设置为 grid。

让我们通过一些插图来理解上述方法。

示例

在此示例中，我们使用 text-align 属性并将其值设置为 center。它可以放置在 body 标签或元素父 div 标签中。

在这里，我们将 text-align: center; 放在按钮元素的父 div 标签中。

输出

示例

在此示例中，我们使用 display: grid; 属性和 margin: auto; 属性。在这里，我们将 display: grid; 放在按钮元素的父 div 标签中。

按钮将放置在水平和垂直位置的中心。

输出

示例

这是将按钮放置在中心的另一个示例。在此示例中，我们使用 display: flex; 属性、justify-content: center; 属性和 align-items: center; 属性。

此示例将帮助我们将按钮放置在水平和垂直位置的中心。

输出