如何在 DIV 元素中使按钮居中

2024-06-03 05:57| 来源: 网络整理| 查看: 265

❮ 上一节下一节 ❯ 如何创建 - 在 DIV 中居中一个按钮

了解如何使用 CSS 将按钮元素垂直和水平居中。

如何使按钮垂直居中实例 .container { height: 200px; position: relative; border: 3px solid green; }

.vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}

Centered Button

亲自试一试 » 如何垂直和水平居中实例 .container { height: 200px; position: relative; border: 3px solid green; }

.center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

Centered Button

亲自试一试 »

你也可以使用 flexbox 来居中:

实例 .center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; } 亲自试一试 »

提示:转到我们的CSS 对齐教程，了解有关对齐元素的更多信息。

提示:转到我们的CSS 转换教程，了解有关如何缩放元素的更多信息。

提示:转到我们的CSS Flexbox 教程了解更多的 flexbox。

【本文地址】

公司简介

联系我们