CSS居中的方法(水平居中和垂直居中)

水平居中

① width 有值   margin:0 auto

② 借助父元素，父元素设置text-align:center

            子元素设置成行内块样式  display:inline-block;

③子绝父相，父元素设置成相对定位,posiotion :relative;

         子元素设置成绝对定位,posiotion:absolute; left :0;right:0;margin:auto;

④子绝父相，父元素设置成相对定位，posiotion:relative;

         子元素设置成绝对定位，posiotion：absolute;left:50%;margin-left:-(自身宽度的一半)px

⑤子绝父相，位移一起   父元素设置相对定位  posiotion:relative;

                   子元素设置绝对定位 posiotion:absolute ; left:50%;transform:translate(-50%)

⑥利用flex布局，父元素设置display:flex;设置justify-content :center;

             

垂直居中的方法

①利用display:table-cell ;父元素设置display:table-cell;

                        子元素设置vertical-align:middle;

②利用flex；父元素设置:display:flex;align-items:center;

③子绝父相加定位；父元素相对定位 display:relative; 注意：父元素不设置宽度

                  子元素绝对定位 display:absolute;top:0;bottom:0;margin:auto;

④子绝父相计算:父元素设置相对定位：display:relative;

            子元素设置绝对定位display:absolute;top:50%;margin-top:-（自身长度的一半）PX

⑤子绝父相加位移:父元素相对定位: display:relative;

              子元素设置绝对定位: display:absolute; top:50%;transform:translate(-50%)