水平居中和垂直居中几种方式

一、水平居中
    

•  自身行内元素   父是块元素 给父元素设置   text-align:center
• 父不是块元素给父元素设置          display:block;   text-align:center

   

     自身块元素方式一

•  定宽     在自身设置   margin: 0 auto;
• 不定宽  在自身设置   display:inline-block或  display:inline                                            再给父元素设置 text- align:center

                               

      自身块元素方式二、 

• 定位先设置父相子绝 自身设置left:50
•       定宽      在自身设置 margin-left:减元素宽度一半px或tansforn:tanslateX(-50%) 
•      不定宽   在自身设置tansforn:tanslateX(-50%)

 

      自身块元素方式三、flex box

•   定不定宽       
• 自身的父元素设置display:flex;
• justify-content:center

         
  
二、垂直居中

•        单行的行内元素   设置自身行高等于盒子高度即可 
•        多行的行内元素   给父级设置 display:table-cell; vertical-align:middle

    
        自身块元素方式一、 定位

• 定位 先设置父相子绝 top:50%
• 定高  在自身设置 margin-top:减元素高度的一半px 或 transform:translateY（-50%）
•  不定高  在自身设置 transform:translateY（-50%）

             
        自身块元素方式二、 flex box

•  定不定高都可以 给父元素设置display:flex; align-items:center

 

三、水平垂直居中  
       自身定高定宽方式一、table

•  其父元素设置 
•  显示为表格的格子  display: table-cell;
•  水平居中 text-align: center;
• 垂直居中  vertical-align: middle;
• 如果子元素不定宽高要给它/* 显示为行内块元素 */ display: inline-block;

      自身定高定宽方式二、先父相子绝

•   在自身设置top:0;
• right:0;
• bottom:0; 
• left:0;
• margin:auto

     自身定高定宽方式三、先父相子绝     

•  给自身设置  left:50%;
• top:50%;
• margin-left:减元素宽度一半px;
• margin-top:减元素高度一半px

 

     自身未知高度方式一、

• 定位 先父相子绝 
•  在自身设置left: 50%;
• top: 50%;
• transform: translateX(-50%  –50%) ;

         
     自身未知高度方式二、flex 

•  给父级设置flex display:flex;
•   justify-context:center;
•   align-items:center;

   自身未知高度方式三、flex 

• 父元素：display: flex;
• 子元素：margin: auto;
• 不用给宽高，但是可以给子元素个内边距防止内容与盒子过于贴合 */ padding: 10px

 

   自身未知高度方式四、grid

•  令其变成网格布局  display: grid; 
•  令子元素居中  place-items: center; }
• 不用给宽高，但是可以子元素给个内边距防止内容与盒子过于贴合 */ padding: 10px