区块水平，垂直以及浮动后居中方式小结

来源：互联网发布：java写入excel换行编辑：程序博客网时间：2024/06/05 10:09
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <!--<link rel="stylesheet" href="global.css"/>-->    <style>        .big1{            width: 1200px;            height: 200px;            background-color: darkkhaki;            position: relative;        }        .childO{            width: 50px;            height: 50px;            background-color: #ac2925;            /*在设置了宽度的情况下，子级在父级里自适应水平居中*/            margin: auto;        }        .childT{            width: 50px;            height: 50px;            background-color: #ff335e;            margin: auto;            /*水平、垂直都居中，利用定位的方式，父级必须先设定非静态定位*/            position: absolute;            top: 0px;            left: 0px;            right: 0px;            bottom: 0px;        }        /*垂直居中*/        .childTh{            width: 100px;            height: 100px;            background-color: green;            position: absolute;            top: 50%;            margin-top: -50px;        }        .big2{            width: 1200px;            height: 200px;            margin-top: 50px;            background-color: #bec7d0;            position: relative;        }        .childOO{            width: 150px;            height: 150px;            background-color: #407cac;            /*浮动水平\垂直居中*/            float: left;            display: inline-block;            position: absolute;            left: 50%;            top: 50%;            margin-left: -75px;            margin-top: -75px;        }    </style></head><body><!--水平居中-->    <div class="big1">        <div class="childO">水平居中</div>        <div class="childT">水平、垂直都居中</div>        <div class="childTh">垂直居中</div>    </div>    <div class="big2">        <div class="childOO">浮动水平、垂直居中</div>    </div> </body></html></pre><br />
1 0