如何在CSS中将按钮居中?

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

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

• 文本对齐：居中-通过将父div标签的文本对齐属性的值设置为居中。
• margin：auto-通过将margin属性的值设置为auto。
• display：flex-通过将display属性的值设置为flex，将justify-content属性的值设置为center 。
• display：grid-通过将display属性的值设置为grid。

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

例

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

在这里，我们将text-align：center;在button元素的父div标签中。

 Click me 

输出量

例

在此示例中，我们使用display：grid;财产和保证金：自动；属性。在这里，我们放置显示：网格；在button元素的父div标签中。

该按钮将位于水平和垂直位置的中心。

 Click me 

In this example we are using the  display: grid;  and  margin: auto; properties

输出量

例

这是将按钮置于中心的另一个示例。在此示例中，我们使用display：flex;属性，证明内容：中心；属性和align-items：居中；属性。

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

 Click me 

输出量