zoukankan      html  css  js  c++  java
  • css 居中

            /* 绝对定位元素居中:  */
            .loading-img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
    
            /* 一般块儿级元素居中:  */
            .div_container {
                width: 500px;
                margin: 0 auto;
            }
    
            /* 块儿级元素内部元素居中(flax布局,水平居中为例):  */
            li {
                width: 100px;
                height: 100px;
                display: inline-block;
                border: 10px solid red;
                margin: 20px;
            }
    
            ul {
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                padding-start: 0;
                /*默认padding-start有40px*/
            }
    
            /* left:0; right:0; top:0; bottom:0; margin:auto;会使child居中,如果child没有宽高,则会继承父集的宽高,适合body 内的遮罩 */
            .child {
                width: 50px;
                height: 50px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
    工欲善其事 必先利其器
  • 相关阅读:
    Redis的特点
    JavaScript语言和JQuery技术
    学习javaDay13
    学习JavaDay12
    学习JavaDay11
    学习JavaDay10
    学习JavaDay09
    学习JavaDay08
    java的语法基础(二)
    java语法基础(一)
  • 原文地址:https://www.cnblogs.com/fengyouqi/p/8085768.html
Copyright © 2011-2022 走看看