前端面试题_02_div水平垂直居中方法汇总

最新推荐文章于 2024-06-03 11:34:32 发布

PE7ERJ

最新推荐文章于 2024-06-03 11:34:32 发布

阅读量305

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_42162265/article/details/110260889

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

div水平垂直居中的方法

在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。
方法一：
绝对定位方法：不确定当前div的宽度和高度，采用transform:translate(-50%,-50%);当前div的父级添加相对定位（position:relative）（没有搞得很清楚
代码如下：

.div{
    background: #f64461;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

方法二：
绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值。
图片展示：
在这里插入图片描述
代码如下：

<body>
    <div class="box1">
        <div class="box2">
            这是一个子级元素
        </div>
    </div>

</body>
<style>
.box1{
    background: #eee;
    position: relative;
    width: 400px;
    height: 400px;
}
.box2{
    background: #f64461;
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
}
</style>

方法三：
绝对定位方法：绝对定位下top left right bottom 都设置为0
图片展示：如方法二的图片展示
代码如下：

.box2{
    background: #f64461;
    position: absolute;
    width: 300px;
    height: 300px;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法四
flex布局方法：当前div的父级添加flex css样式
显示图如下：
在这里插入图片描述
代码如下：

<body>
    <div class="box1">
        <div class="box2">
            这是一个子级元素
        </div>
    </div>
</body>
<style>
.box1{
    background: #eee;
    height: 400px;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
}
.box2{
    background: #f64461;
    width: 300px;
    height: 300px;
}
</style>

如果需要使用在Safari需要加上前缀-webkit-

    -webkit-display: flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;

方法五
table-cell实现水平垂直居中；table-cell middle center组合使用（让里面的元素居中）
展示图如下：
在这里插入图片描述

.box2{
    background: #f64461;
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 300px;
    height: 300px;
}

方法六
绝对定位：calc()函数动态计算实现水平垂直居中
展示图如下：
在这里插入图片描述
代码如下：

<body>
    <div class="calc">
        <div class="child">
            这是一个子级元素
        </div>    
    </div>
</body>
<style>
.calc{
    background: #eee;
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
}
.child{
    position: absolute;
    width: 300px;
    height: 300px;
    left: calc((400px - 300px)/2);
    top: calc((400px - 300px)/2);
    background: #f64461;
}
</style>