在浏览器中实现盒子的居中和将input表单设置为居中显示

将input表单设置为居中，只需要设置以下三行代码：

display:block;
margin-left:auto;
margin-right:auto

在浏览器中实现盒子的水平居中，有以下几种方式：

第一种方式：定位

父元素：position:relative;
子元素：position:absloute;
将子元素设置为：left:50%,top:50%,此时的效果仅仅是将子元素左上角的坐标向下平移了50%，向右平移了50%，但是自身的宽高没有计算在内，导致元素没有居中。
要解决居中，还需加一行代码,减去自身的宽和高：
margin:-50px 0 0 -50px;
这样就实现子盒子在父盒子内居中了！

第二种方式：flex布局

给父元素设置flex布局：
display:flex;
justify-content:center;//水平居中
align-items:center;//垂直居中

第三种方式：

将父元素display:table;
子元素：display:table-cell;//将子元素转化为行内元素
        vertical-align:middle;
        text-align:center;
必须向下嵌套一层，嵌套的一层必须将其设置为：display:inline-block;

第四种方式：伪元素法

伪元素设置：display:inline-block;vertical-align:middle;
子元素跟伪元素设置同样的样式即可。