css各居中大法

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>居中大法</title>
      <style>
         .item  {
            width: 200px;
            height: 200px;
                float: left;
                margin: 20px;
                position: relative;
            border: 1px solid black;
         }
         .item div{
            width: 100px;
            height: 100px;
            background: red;
         }
         /*第一种
             * good：兼容所有浏览器
             *  bad：必须知道元素具体宽高
              */
         .div1{
            position: relative;/*absolute也可*/
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
         }
         /*第二种
             * good：可以不知元素具体宽高，适合所有移动端
             *  bad：ie8以下不支持
              */
         .div2{
                position: absolute;/*fixed也可*/
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
         }
            /*第三种
             * good：可以对不确定高度的元素垂直居中，适合所有移动端
             *  bad：ie9以下不支持 当前容器必须知道具体高度
              */
            .div3{
                width: 200px;
                height: 200px;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
            .div3  img{
                width: 100px;
                height: 100px;
            }

            /*第四种
             * good：可以对不确定高度的元素垂直居中，适合所有移动端
             *  bad：ie9以下不支持 父元素加个display：table，实现类table
            */
            .div4{
                width: 200px;
                height: auto;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
            .item .inner-table{
                width: 100%;
                height: 100%;
                display: table;
            }
            .div4  img{
                width: 100px;
                height: 100px;
            }

            /*第五种
            *  good：文本水平垂直居中
            *  bad：只适用单行文本
            */
            .item .div5{
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;;
            }

            /*第六种
             * good：可以对多个元素元素垂直居中，适合所有移动端，可以未知宽高
             *  bad：ie9以下不支持
            */
            .div6{
                width: 200px;
                height: 200px;
                display: -webkit-box;/*弹性盒子模型*/
                -webkit-box-pack: center;
                -webkit-box-align: center;
            }
            .div6  img{
                display: block;
                width: 100px;
                height: 100px;
            }
            /*第七种
             * good：适合所有移动端,适用未知高度
             *  bad：ie9以下不支持
              */
            .div7{
                position: relative;/*absolute也可*/
                left: 50%;
                top: 50%;
                -webkit-transform:translate(-50%,-50%); /* Safari 和 Chrome */
                   -moz-transform:translate(-50%,-50%);    /* Firefox */
                    -ms-transform:translate(-50%,-50%);    /* IE 9 */
                     -o-transform:translate(-50%,-50%);
            }
            /*第八种
             * good：适合所有浏览器,适用未知高度
             *  bad：null
              */
            .item .div8{
                width: 100%;
                height: 100%;
                text-align: center;
            }
            .div8:before{
                height: 100%;
                display: inline-block;
                vertical-align: middle;
                background: blue;
                content: '';
            }
            .center{
                border: 1px solid blue;
                display: inline-block;
                vertical-align: middle;
                line-height: 100px;
            }
            /*第九种
            *  good：可以对多个元素元素垂直居中，可以未知宽高
            *  bad：安卓的原生浏览器不支持，能够正常显示模块，文档流依次排列；UC浏览器不支持，显示为空白；微信浏览器不支持
           */
            .item .div9{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;
            }
            .div9  img{
                display: block;
                width: 50px;
                height: 60px;
            }
      </style>
   </head>
   <body>
      <div class="item">
         <div class="div1"></div>
      </div>
      <div class="item">
         <div class="div2"></div>
      </div>
        <div class="item">
            <a class="div3">
                <img src="img/1.jpg" alt="img">
            </a>
        </div>
        <div class="item">
            <div class="div5">我要居中</div>
        </div>
        <div class="item">
            <a class="div6">
                我要居中<img src="img/1.jpg" alt="img">
            </a>
        </div>
        <div class="item">
            <div class="div7"></div>
        </div>
        <div class="item">
            <div class="div8">
                <div class="center">我要居中</div>
            </div>
        </div>
        <div class="item">
            <div class="div9">
                <img src="img/1.jpg" alt="img">
                <img src="img/1.jpg" alt="img">
            </div>
        </div>
   </body>
</html>
各位前端伙伴肯定还有其他的水平垂直居中方式，欢迎回复讨论！！！
巴特西

css各居中大法

最新文章

热门文章
