div 水平垂直居中方法

最新推荐文章于 2024-07-24 16:53:23 发布

lanfuA

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量91

点赞数

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

本文链接：https://blog.csdn.net/lanfuA/article/details/117189531

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

div 水平垂直居中方法

方法一：

绝对定位方法：不确定当前div 的宽度，高度; 采用 transform: translate(-50%, -50%);当前父级元素添加相对定位position:relative;

<body>
    <div class="father">
        根节点

        <div class="child">方法一</div>
        <div class="one">方法二</div>
        <div class="two">方法三</div>


    </div>

</body>
<style>
    .father {
        display: flex;
        width: 600px;
        height: 600px;
        background: rgb(139, 139, 139);
        position: relative;
    }
    
    .one {
        position: absolute;
        background: blue;
        width: 50px;
        height: 50px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
    }
    /* 确定div 的宽度高度 ，margin 宽度高度为当前元素的一半 */
    
    .two {
        position: absolute;
        background: rgb(18, 219, 203);
        width: 80px;
        height: 80px;
        left: 50%;
        top: 50%;
        margin-top: -40px;
        margin-left: -40px;
        z-index: 2;
    }
    /* 方法三 绝对定位下  top: 0px;left: 0;right: 0; bottom: 0;*/
    
    .child {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: red;
        z-index: 1;
    }
    
    .three {
        width: 120px;
        height: 120px;
        align-items: center;
        justify-content: center;
        background-color: chartreuse;
    }
</style>

方法二：确定当前div 的宽度高度，margin 宽度高度为当前元素的一半；

方法三：绝对定位下top. left ,right,bottom 的值为0；

效果图：

方法四：calc 动态函数计算

<body>
    <div class="calc">
        <div class="child">
            calc 动态计算
        </div>
    </div>

</body>

<style>
    /* calc 函数动态计算水平垂直居中方法 */
    
    .calc {
        position: relative;
        border: 2px solid red;
        width: 400px;
        height: 160px;
    }
    
    .calc .child {
        position: absolute;
        width: 200px;
        height: 50px;
        background-color: saddlebrown;
        left: calc((400px - 200px)/2);
        top: calc((160px - 80px)/2);
    }
</style>

效果图

方法五： flex 布局侧轴(纵轴)方向上的对齐： align-items: center; 主轴（垂直横向居中）justify-content: center;

<body>
    <div class="father">
        <div class="child">
        </div>
    </div>

</body>
<style>
    /* flex 布局 侧轴(纵轴)方向上的对齐： align-items: center; 主轴（垂直横向居中）justify-content: center; */
    
    .father {
        display: flex;
        width: 300px;
        height: 300px;
        align-items: center;
        justify-content: center;
        background-color: brown;
    }
    
    .child {
        width: 100px;
        height: 100px;
        background-color: chartreuse;
    }
</style>

效果图：

方法六：table_cell 垂直居中： vertical-align: middle; 水平居中：text-align: center; 子元素需要设置 display: inline-block;

<body>
    <div class="table_cell">
        rable_cell


    </div>

</body>
<style>
    /*
     table_cell
     垂直居中： vertical-align: middle; 水平居中：text-align: center;  
     子元素需要设置 display: inline-block;
     */
    
    .table_cell {
        width: 200px;
        height: 200px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border: 2px solid red;
    }
</style>

效果图：