div中input垂直居中的方法

最新推荐文章于 2023-09-30 13:11:25 发布

原创最新推荐文章于 2023-09-30 13:11:25 发布 · 9.3k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍两种在div中使input元素垂直居中的方法：使用absolute定位配合transfrom属性和利用absolute定位加margin自动计算。这两种方法适用于前端布局设计，帮助开发者实现更精确的页面元素对齐。

div中input垂直居中的方法

1. absolute+transfrom

<div>
	<input type="text"/>
</div>

<style>
    div{
		position: relative;
		height: 44px;
		background-color: #fe3c35;
	}
	input{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		height: 30px;
		background-color: #FFFFFF;
	}
</style>

2. absolute+margin

<div>
    <input type="text"/>
</div>
    
<style>
    div{
        position: relative;
        height: 44px;
        background-color: #fe3c35;
    }
    input{
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        height: 30px;
        width: 80%;
        background-color: #FFFFFF;
    }
</style>