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
1、首先通过vertical-align:middle实现现图片与文字水平对齐，需要区分html是行内元素，还是块状元素，实现img、p及div水平居中对齐，则只需要在img的css中的vertical-align：middle；及将p和div（display：inline-block）转化为行内元素。
2、实现img、span水平居中对齐，由于这两者都是行内元素。
3、则只需要在img的css中的vertical-align：middle；span标签什么都不需要添加。
4、通过flex布局实现图片与文字水平对齐，只需要在父级元素中css添加。
5、子级元素则不需要像上面那样添加vertical-align：middle，这样就可以了。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{
border: 1px solid blue
width: 300px
text-align: justify
}
div:after {
display: inline-block
width: 100%
content: ''
}
3、浏览器运行index.html页面，此时一行内的文字实现了两端对齐。
