div标签盒子居中css样式

效果图：

代码：

<div class="app">
            <input type="text" name="" id="" value="姓名" /><br>
            <input type="text" name="" id="" value="密码" />
</div>

css代码:

.app{
                width:10%;
                height: 50px;
                border: 1px solid red;
                /*padding表示内边距
                100px——上内边距为100px
                20px——左内边距为20px
                200px——下内边距为20px
                300px——右内边距为300px
                */
                padding: 80px 200px 100px 200px;
                /* 绝对定位 */
                position: absolute;
                /*  元素的顶部边缘为50% */
                top: 50%;
                /*  左边框 距离浏览器左边50% */
                left: 50%;
                /* 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，
                反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。 */
                transform: translate(-50%,-50%);
        }