一、文字、行内元素水平居中
给父级属性设置text-align: center即可
HTML代码:
<div><p>p</p></div><div><span>span</span></div><div><a href="#">a</a></div>
CSS代码：
<style>div{background-color: pink;font-size: 20px;text-align: center;margin: 3px;}div p{margin: 0;}</style>
效果:
二、文字、行内元素垂直居中
css并未直接提供让行内元素居中的属性，一般通过设置行高：line-height和父级盒子等高来实现垂直居中
还是上头的HTML代码：
<div><p>p</p></div><div><span>span</span></div><div><a href="#">a</a></div>
CSS代码给定父级盒子的高度height，然后line-height=height的值
line-height: 50px;height: 50px;
效果：
三、块级元素水平居中
可以通过设置外边距margin:auto使块级元素水平居中
HTML代码：
<div class="box"><div class="son">div</div></div>
CSS代码：
<style>.box{background-color: rgb(241, 154, 168);font-size: 20px;}div p{margin: 0;}.son{background-color: red;width: 50px;margin: auto; } </style>
效果：
注意：
设置之前必须先给定宽度width
