CSS实现水平垂直居中

 

<div class="wrapper">
    <div class="content"></div>
</div>

 

一、水平居中

1. 行内元素：对其父元素应用text-align:center属性

1. .wrapper{
       text-align: center;
   }

    

2. 块级元素：对自身应用margin:auto属性

   .content{
       width: 200px;
       margin: 0 auto;
   }

    

二、水平垂直居中

1. 元素固定尺寸
   • 一般
     

     .content{
         width: 400px;
         height: 200px;
         position: absolute;
         top: 50%;
         left: 50%;
         margin-top: -100px;
         margin-left: -200px;
     }

      

   •  使用calc()

     .content{
         width: 400px;
         height: 200px;
         position: absolute;
         top: calc(50% - 100px);
         left: calc(50% - 200px);
     }

      

2. 元素尺寸由内容决定
   • 绝对定位

     .content{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }

     [注意]

     • 当居中元素的高度超过了视口，则它的顶部会被视口裁切掉
     • 在某些浏览器中，会导致元素显示有一些模糊，用transform-style:preserce-3d修复

        

   • 不使用绝对定位

     .content{
         margin: 50vh auto 0;
         transform: translateY(-50%);
     }

     [注意]

     • 视口相关长度单位  vw: 1vw为视口宽度的1%； vh: 1vh为视口高度的1%
     • 当视口宽度小于高度时，1vmin等于1vw，否则等于1vh

        

3. Flexbox伸缩盒 
   • one
     

     .wrapper{
         display:flex;
         min-height: 100vh;
         margin: 0;
     }
     
     .content{
         margin: auto;
     }

     [注意]".content"元素不需要指定宽度，这个元素分配到的宽度等于max=content

      

   • two
     

     .wrapper{
         display: flex;
         align-item: center;
         justify-content: center;
     }

      

 

来源：https://www.cnblogs.com/dxchen/p/7724172.html