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
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,html { margin: 0 position: relative height: 100% }
.container { width: 480px background-color: yellow margin: 0 auto position: relative height: 100% }
.box { background-color: red width: 80px height: 20px position: absolute left: -80px top: 0 }
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
<p></p>代表的是一个段落容器，这个容器的style:text-align
决定了整个容器里元素的排版方式
而
vertical-align
属性是设置元素的
垂直对齐
方式。
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
也就是说这两个属性的目标是不一样的，<p></p>以及其他父类容器假如定义了text-align属性，那这些容器内的子元素都按照这个排版方式来进行排版，而vertical-align只是影响设置了这个属性的元素。
其实CSS你要去看具体的属性有什么特性才能了解具体的内容
建议去
http://www.w3school.com.cn/
看看
