您现在的位置是:网站首页>文章内容文章内容

div绝对居中的六种方法

李鹏2022-08-22前端517人已围观

在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现。

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

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

方法二:绝对定位方法:确定了当前 div 的宽度, margin 值为当前 div 宽度一半的负值

div{
    width:600px;
    height: 600px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
}

方法三:绝对定位方法:绝对定位下 top left right bottom 都设置 0

<div class="child">我是子级</div>
div.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法四: flex 布局方法:当前 div 的父级添加 flex css 样式

<div class="box">
    <div class="child">child</div>
</div>
.box{
    height:800px;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    border:1px solid #ccc;
}
div.child{
    width:600px;
    height:600px;
    background-color:red;
}

方法五: table-cell 实现水平垂直居中: table-cell middle center 组合使用

<div class="table-cell">
    <p>我爱你</p>
</div>
.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}

方法六:绝对定位: calc() 函数动态计算实现水平垂直居中

<div class="calc">
    <div class="child">calc</div>
</div>
.calc{
    position: relative;
    border: 1px solid #ccc;
    width: 400px;
    height: 160px;
}
.calc .child{
    position: absolute;
    width: 200px;
    height: 50px;
    left:-webkit-calc((400px - 200px)/2);
    top:-webkit-calc((160px - 50px)/2);
    left:-moz-calc((400px - 200px)/2);
    top:-moz-calc((160px - 50px)/2);
    left:calc((400px - 200px)/2);
    top:calc((160px - 50px)/2);
}

版权声明:本文为 CSDN 博主 「yanhyan」 的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_40151813/article/details/104049289

0

文章评论

lipeng :
phpinfo();

我的名片

姓名:李鹏

职业:PHP工程师

现居:广东-深圳

网址:https://www.lipeng93.cn