水平居中方式

1.使用text-align：center实现行内元素水平居中      /*div内的行内元素均会水平居中*/

1 <style>
2 .demo{
3           text-align: center; 
4         }
5 </style>    

Css View Code

1 <div class="demo">
2           我是一只小小鸟
3           <span>我也是一只小小鸟</span>
4 </div>

HTML View Code

②行内元素的垂直居中、/*div内得行内元素均会垂直居中*/、/*当然想要既水平居中有垂直居中就两个都加*/

Css View Code

 

2.使用position margin实现块级元素水平居中

1 .demo{
2             height: 400px;
3             width: 200px;
4             border: 2px dashed red;
5             position: absolute;
6             top: 50%;
7             left: 50%;
8             margin:-200px 0 0 -100px;
9           }

Css View Code

1 <div class="demo">1 absolute middle </div>

HTML View Code

2.