1. 口诀：子绝父相定位

!DOCTYPE html>

<body>
    <div>
        <input value="对齐了吗">
    </div>
</body>
<style>
div{
    position: relative;
    height: 200px;
    background-color: grey;
}
input{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
</style>
</html>

结果

 

 

 

 2.利用display：flex

<!DOCTYPE html>
<body>
    <div>
        <input value="对齐了吗">
    </div>
</body>
<style>
div{
    height: 200px;
    background-color: grey;
    display: flex;
    justify-content:center;
    align-items:Center;
}
</style>
</html>