使用 CSS 居中的方法
1.1. 使用 flexbox 居中
flexbox 是一种现代的布局模式，可以简单方便地实现居中效果。
首先，在 HTML 中创建一个
元素，并为其添加一个类名 container。
元素。
元素，并将 元素放置在其中一个
然后，在 CSS 中通过以下方式为 .container 添加样式：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
1.2. 使用 table 居中
另一种实现文本框居中效果的方法是使用
| 中。
在 CSS 中为 .container 添加样式： .container { display: table; width: 100%; height: 100vh; text-align: center; vertical-align: middle; } 1.3. 使用 position 居中 还可以使用 position 属性来实现文本框的居中效果。 在 HTML 中创建一个 元素，并为其添加一个类名 container。
在 CSS 中为 .container 添加样式： .container { position: relative; height: 100vh; } .container input { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 相关推荐友情链接 |