关于css的水平居中和垂直居中问题

水平居中：1.          .parent{text-align: center;}.child{display: inline-block;} 兼容性比较好
    2. 使用margin：0 auto  .child{width:200px;margin:0 auto;}   需要指定宽度
    3.使用table     .child{display:table;margin:0 auto;}
    4. 使用绝对定位       .parent{position:relative;}
            /*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
            .child{position:absolute;left:50%;transform:translate(-50%);}
    5.使用flex布局           /*第一种方法*/
                .parent{display:flex;justify-content:center;}
                /*第二种方法*/
                .parent{display:flex;}
                .child{margin:0 auto;}  兼容性太差
垂直居中：1. vertical-aligin    由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;
    /*第一种方法*/
    .parent{display:table-cell;vertical-align:middle;height:20px;}
    /*第二种方法*/
    .parent{display:inline-block;vertical-align:middle;line-height:20px;}
    

块级元素水平垂直居中的方法有哪些（三个方法）

 

让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！

实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

   CSS代码：

.mycss{

   width:300px;  

   height:200px;  

   position:absolute;  

   left:50%;  

   top:50%;  

   margin:-100px 0 0 -150px }

 

 实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

   CSS代码：

.mycss{

    position: absolute;

    left: 0px;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    height: 200px;

    width: 300px;

}

另外附另一个博客链接

https://blog.csdn.net/weixin_37580235/article/details/82317240