1、margin : auto
此属性用于将块元素水平对齐到中心。
示例：
注意：使用margin : auto在IE8中不起作用，除非声明了!DOCTYPE。
效果图：
2、position: absolute
我们可以使用position: absolute来对齐项目。
示例：
效果图：
3、text-align: center
我们可以在各种标签中使用text-align: center；它可以将任何用HTML编写的文本对齐。
示例：
效果图：
4、line-height属性
想要垂直对齐项目，我们可以使用line-height属性。line-height 属性设置行间的距离（行高）。
示例：
效果图：
5、padding和text-align属性
我们可以使用padding属性和text-align : center的组合来垂直和水平对齐文本。
示例：
效果图：
本文参考地址： https://www.html.cn/qa/css3/10403.html
css中的vertical-align属性设置元素的垂直对齐方式，可能的值：
baseline
默认。元素放置在父元素的基线上。
sub
垂直对齐文本的下标。
super
垂直对齐文本的上标
top
把元素的顶端与行中最高元素的顶端对齐
text-top
把元素的顶端与父元素字体的顶端对齐
middle
把此元素放置在父元素的中部。
bottom
把元素的顶端与行中最低的元素的顶端对齐。
text-bottom
把元素的底端与父元素字体的底端对齐。
%
使用
"line-height"
属性的百分比值来排列此元素。允许使用负值。
inherit
规定应该从父元素继承
vertical-align
属性的值。
如下代码即可实现垂直对其：
.img{vertical-align:bottom}
.input{vertical-align:bottom}
<p>
<img
class="img"
border="0"
src="/i/eg_cute.gif"
/>
<input
class="input"
/>
</p>
在CSS中的vertical-align属性是设置元素垂直对齐的方式
需要注意的是：
vertical-align属性定义行内元素的基线是相对vertical-align这个元素所在行的基线的垂直对齐。
是会允许指定负长度值和百分比值的。
这样是会导致vertical-align元素降低，并非是升高的。
在单元表格中，vertical-align属性是能设置单元格框中的
单元格内容的对齐方式的
vertical-align属性的浏览器支持情况如下：
目前所有的浏览器都是支持vertical-align的属性的
但是需要注意的是：无论是任何的版本的
Internet
Explorer，包括
IE8在内，都是不支持 "inherit"这个属性值的。
vertical-align属性的实例介绍如下：
垂直对齐一幅图像的实力介绍：
img { vertical-align:text-top}
