Html
    Css
    Js

    
                        
        #center-hor1{
            background-color: red;
            color: #F8CBAD;
            top: 50%;
            left :50%;
            width: 100px;
            position: absolute;
            /*transform: translateY(-50%); !*防止多行出现的对齐问题*!*/
            transform: translate(-50%, -50%);
        }
        #center-hor2 {
            position:absolute;
            color: #F8CBAD;
            width:100px;
            height:100px;
            top:50%;
            left:50%;
            margin-top:-50px; /*height的一半*/
            margin-left:-50px;/*width的一半*/
            background:red;
        }
        #center-hor3{
            background-color: red;
            color: #F8CBAD;
            width: 100px;
            height: 100px;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            position: absolute;
        }
        #center-ohor1 {
            background-color: red;
            color: #F8CBAD;
            position: relative;
            top: 50%;
            transform: translateY(-50%); /*防止多行出现的对齐问题*/
        }
        #center-ver1 {
            background-color: red;
            color: #F8CBAD;
            border: 1px black solid;
            display: inline-block;
            width: 150px;
        }
        #center-ver2 {
            background-color: red;
            color: #F8CBAD;
            border: 1px black solid;
            width: 150px;
            margin: 0 auto;
            text-align: center;/*让文本居中*/
        }
        #center-ver3 {
            display: flex;
            flex-direction: row;/*主轴方向row为默认*/
            justify-content: center;/*主轴对齐方式*/
            align-items: center;
        }
        #center-ver3 div {
            width: 50px;
            height: 100px;
            border: 1px black solid;
        }
        #center-ver4 {
            display: flex;
            flex-direction: column;/*主轴为列*/
            justify-content: center;/*主轴对齐方式*/
            align-items: center;
        }
        #center-ver4 div {
            height: 50px;
            width: 100px;
            border: 1px black solid;

        }
        ul > li {
            border: 1px black solid;
            width: 200px;
        }
        ul > li > span {
            color: blueviolet;
        }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css水平居中和css垂直居中

主要是利用position:absolute和flex这两种方式进行的居中设置

0