如何在全宽 Div 内水平（和垂直）居中按钮？

在 100% 宽度的 Div 中将按钮居中

CSS 中的一个常见需求是将按钮在跨越整个 div 的居中页面的宽度。为了实现这一点，有多种方法可用。

一种方法是使用 Flexbox。通过将div的display属性设置为flex并添加justify-content: center和align-items: center，div就成为一个flexbox容器，其子元素垂直和水平居中。

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
button {
  /* Other styles */
}

如果垂直对齐没有必要，您可以简单地使用 justify-content: center。

#wrapper {
  display: flex;
  justify-content: center;
}
button {
  /* Other styles */
}

对于更传统的方法，您可以将按钮的 margin 属性设置为 auto。这将使按钮在 div 内水平居中。

button {
  margin: 0 auto;
  /* Other styles */
}

或者，您可以将 div 的 text-align 属性设置为居中。这将使 div 中的所有元素（包括按钮）居中。

div {
  text-align: center;
}
button {
  /* Other styles */
}

这些只是将按钮在 div 中居中的几种方法。最佳方法将取决于布局的具体要求。

以上是如何在全宽 Div 内水平（和垂直）居中按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！