常用的8种实现div盒子居中的方法

最新推荐文章于 2024-10-05 23:11:01 发布

请贝肯尼吃糖

最新推荐文章于 2024-10-05 23:11:01 发布

阅读量7.8k

点赞数 4

分类专栏： css3 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_52409560/article/details/127042537

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、利用margin和overflow结合

  <style>
        .bigbox{
            width: 500px;
            height: 500px;
            background-color: pink;
            overflow: hidden;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 0 auto;
            margin-top: 175px;
        }
    </style>
</head>
<body>
    <!-- 1、利用margin和overflow结合 -->
    <div class="bigbox"><div class="box"></div></div>
    
</body>

2、利用定位和margin结合使用条件：知道自身宽高

  <style>
        .bigbox{
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
            
        
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            text-align: center;
            line-height: 100px;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;      
        }
    </style>
</head>
<body>

    <div class="bigbox"><div class="box">居中</div></div>
</body>

3、absolute + margin auto 这种方式通过设置各个方向的距离都是 0，此时再讲 margin 设为 auto，就可以在各个方向上居中了。

使用条件：子元素固定宽高

 <style>
        .bigbox{
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
        
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
           text-align: center;
           line-height: 100px;
           position: absolute;
          /* 这五条很重要 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
           
          
        }
    </style>
</head>
<body>
    <div class="bigbox"><div class="box">居中</div></div>
</body>

4、absolute+transform

使用条件：在不知道子元素自身的宽高下

  <style>
        .bigbox {
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            position: relative;

        }

        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            text-align: center;
            line-height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="box">居中</div>
    </div>
</body>

5、 lineheight

把 box 设置为行内元素，通过 text-align 就可以做到水平居中，

vertical-align 也可以在垂直方向做到居中,子元素中将文字显示重置为想要的效果

vertical-align 属性设置元素的垂直对齐方式 , middle把此元素放置在父元素的中部。

使用条件：要求子元素固定宽高

    <style>
        .bigbox{
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            line-height: 500px;
            text-align: center;
            /* font-size: 0px; */
        
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* font-size: 16px; */
            display: inline-block;
            vertical-align: middle;
            line-height: 100px;
            /* text-align: center; */
           
          
        }
    </style>
</head>
<body>
    <div class="bigbox"><div class="box">居中</div></div>
</body>

6、table

tabel 单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

让行内元素水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。

   <style>
        .bigbox{
            width: 500px;
            height: 500px;
            background-color: pink;
            text-align: center;
        
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            text-align: center;
            line-height: 100px;
            display: inline-block;
          
        }
        /* 让大盒子居中 */
        table {
            margin: 0 auto;
        }
    </style>
</head>
<body>    
    <table>
        <tr>
            <td class="bigbox"><div class="box">居中</div></td>

        </tr>
    </table>

7、利用弹性盒子和 justify-content: center;align-items: center 结合使用

    <style>
        .bigbox{
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
           text-align: center;
           line-height: 100px;
          
        }
    </style>
</head>
<body>
    <!-- 利用弹性盒子和 justify-content: center;
            align-items: center  结合使用-->
    <div class="bigbox"><div class="box">居中</div></div>
</body>

8、paddding+top等于bottom 、利用相等的顶部内边距和底部内边距填充将子分区置于父分区的中心。

    <style>
        .bigbox{
            width: 500px;
            /* height: 500px; */ 
            background-color: pink;
            margin: 0 auto;
            padding: 9% 0;
            box-sizing:content-box;


        
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
           text-align: center;
           line-height: 100px;
          
           margin: 0 auto;
          
        }
       
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="box"></div>
   </div>
</body>