垂直水平居中的几种方法

1，（元素在容器中垂直水平居中）

css： .box{width:800px;height:800px;background:#ccc;display:flex;justify-content:center;align-items:center;}

               .box div{width:300px;height:300px;background:red;}

html:  <div class="box">

               <div></div> 

          </div>

 

 

2,（元素在容器中垂直水平居中）

css： .box{width:800px;height:800px;background:#ccc;display:flex;justify-content:center;}

               .box div{width:300px;height:300px;background:red;align-self:center;}

html:  <div class="box">

                <div></div> 

          </div>

 

 

3,(元素在页面垂直水平居中)

css:   .box{width:800px;height:800px;background:red;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}

html:  <div class="box"></div>

 

 

4,（元素在容器中垂直水平居中）

css:    .box{width:800px;height:800px;text-align:center;}

          .box .box2{display:inline-block;vertical-align:middle;}

          .box span{display:inline-block;width:0px;height:100%;vertical-align:middle;}

html:   <div class="box">

                   <a class="box2">垂直水平居中</a><span></span>                    

           </div>

           <!--要在元素后面不换行加空的span-->