CSS子元素的div水平垂直居中怎么做，方法指什么

发布时间：2023-10-16 15:29:45 所属栏目：语言来源：

导读：这篇文章给大家介绍了“CSS子元素的div水平垂直居中怎么做，方法是什么”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

这篇文章给大家介绍了“CSS子元素的div水平垂直居中怎么做，方法是什么”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

div基本布局

<div class="main">

   <div class="center"></div>

  </div>

css样式

1. 配合定位与margin：auto

父元素加相对定位，子元素加绝对定位

.main{

    width: 300px;

    height: 300px;

    background-color: red;

    position: relative;

   }

   .center{

    width: 100px;

    height: 100px;

    background-color: skyblue;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

   }

2.利用flex布局，设置水平与竖直方向的内容居中。

.main{

    width: 300px;

    height: 300px;

    background-color: red;

    display: flex;

    justify-content: center;

    align-items: center;

   }

   .center{

    width: 100px;

    height: 100px;

    background-color: greenyellow;

   }

3.利用position:absolute与transform

:这里需要记住的是transform中translate使用百分比时相对的是自己的长宽，不是父盒子的。

.main{

     width: 300px;

     height: 300px;

     background-color: red;

     position: relative;

    }

    .center{

     width: 100px;

     height: 100px;

     background-color: pink;

     position: absolute;

     left: 50%;

     top: 50%;

     transform: translateX(-50%) translateY(-50%);

    }

4.定位与负margin配合

只适合子盒子长宽固定的情况

.main{

     width: 300px;

     height: 300px;

     background-color: red;

     position: relative;

    }

    .center{

     width: 100px;

     height: 100px;

     background-color: pink;

     position: absolute;

     left: 50%;

     top: 50%;

     margin-left: -50px;

     margin-top: -50px;

    }

5.display:table-cell

display:table-cell；与vertical-align:middle 的作用是让子盒子在数值方向上居中

margin:auto;则让子盒子在水平方向居中，若只想让盒子在某个方向居中，去掉另一个就可以了。

.main{

     width: 300px;

     height: 300px;

     background-color: red;

     display: table-cell;

     vertical-align: middle;

    }

    .center{

     width: 100px;

     height: 100px;

     background-color: #000;

     margin: auto;

    }

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!