让<div>里的<input>保持水平居中,垂直居中
时间: 2024-09-10 07:10:57 浏览: 16
要在HTML的`<div>`元素中将内部的`<input>`元素水平和垂直居中,可以采用CSS Flexbox或者Grid布局。以下是两种常见的方法:
**1. 使用Flexbox:**
```html
<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100%; /* 如果容器有高度限制,需要设置 */
}
.input-element {
width: 200px; /* 设置输入框宽度,可根据需要调整 */
}
</style>
<div class="container">
<input type="text" class="input-element" placeholder="请输入内容">
</div>
```
**2. 使用Grid布局:**
```html
<style>
.container {
display: grid;
place-items: center; /* 同时实现水平和垂直居中 */
height: 100vh; /* viewport高度,同样需要设置合适的高度 */
}
.input-element {
width: 200px; /* 输入框宽度 */
}
</style>
<div class="container">
<input type="text" class="input-element" placeholder="请输入内容">
</div>
```