HTML元素居中（文字居中，块居中【垂直/水平居中】）

一、文字、行内元素水平居中

给父级属性设置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