div水平垂直居中

最新推荐文章于 2022-11-04 16:29:54 发布

fivestar2009

最新推荐文章于 2022-11-04 16:29:54 发布

阅读量274

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/fivestar2009/article/details/106648130

版权

html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
               body,div,span{
                   margin:0px;
                   padding:0px;
               }

               #thewhole{
                   display:flex;
                   display: -webkit-flex;
                   width:99%;
                   height:99%;
                   align-items:center;
              justify-content:center;
              border: 1px solid red;

              position:absolute;
               }
            #box{
                display: flex;
                display: -webkit-flex;
                border: 1px solid #0000FF;
                height: 200px;
                width: 400px;
                align-items:center;
                justify-content:center;
            }
            .item{
                width: 50px;
                height: 40px;
                border: 1px solid #00C1B3;
            }
        </style>
    </head>
    <body>
           <div id="thewhole">
               <div>
                   <div id="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">加了position：absolute才能垂直居中</div>
               </div>
               <div id="div2">使用了flex就不是独占了，如果想box独占，则在box外面在扩一个div，这样box和div2都可以占一行了，否则就会造成这两个div四1行</div>
               </div>

           </div>

    </body>
</html>