CSS按钮样式设置：大小、字体、内容居中

想要创建一个自定义样式的按钮，并控制其大小、字体以及内部元素的居中？以下CSS代码将帮助你实现：

.button {
  font-size: 20px; /* 调整字体大小 */
  width: 200px; /* 调整按钮宽度 */
  height: 50px; /* 调整按钮高度 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border: none; 
  padding: 0;
  z-index: 1000;
}

在HTML中，将按钮的class属性设置为button即可应用以上样式：

<button class='button'>按钮</button>

代码解析：

font-size: 控制按钮内文字的大小。
width和height: 分别控制按钮的宽度和高度。
display: flex: 将按钮设置为flex容器，使其内部元素可以使用flexbox布局。
justify-content: center: 使按钮内的内容水平居中。
align-items: center: 使按钮内的内容垂直居中。
border: none;: 移除按钮默认边框。
padding: 0;: 移除按钮默认内边距。
z-index: 1000;: 设置按钮的层级，确保其显示在其他元素之上（如果需要）。

通过修改以上CSS属性的值，你可以轻松地自定义按钮的样式，以满足你的设计需求。