以下是一些使按钮居中的CSS代码示例:
1. 使用绝对定位:
“`css
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
此代码将把按钮绝对定位到页面底部,并将其中心位置设置为50%。通过将“top”属性设置为“50%”,按钮将自动居中。
2. 使用伪元素:
“`css
button {
display: inline-block;
width: 100%;
height: 40px;
text-align: center;
此代码将把按钮设置为 inline-block 元素,使其宽度为100%,并将其高度设置为40px。通过将“text-align”属性设置为“center”,按钮将自动居中。
3. 使用表格布局:
“`css
table {
border-collapse: collapse;
text-align: center;
button, input[type=”button”] {
display: table-cell;
vertical-align: middle;
此代码将把按钮和输入框设置为表格元素,并将其中心位置设置为“vertical-align: middle”。通过将“display”属性设置为“table-cell”,按钮和输入框将自动居中。
这些代码示例只是使按钮居中的一些方法,具体使用哪种方法取决于您的具体要求和页面设计。