实现div水平垂直居中的几种方式

最新推荐文章于 2022-03-02 14:40:18 发布

凯迪blak

最新推荐文章于 2022-03-02 14:40:18 发布

阅读量809

点赞数

分类专栏：知识点文章标签： htnl div 水平垂直居中

本文链接：https://blog.csdn.net/Scryhuaihuai/article/details/100661030

版权

知识点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使div水平垂直居中的几种方式：

1、第一种

父div高度宽度固定，相对定位；子div高度宽度固定，绝对定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;实现水平垂直居中。

缺点就是子div脱离文档流

.my-div{
    border:1px solid red;
    width:400px;
    height:300px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-150px;
    // transform: translate(-50%, -50%); // 此效果相当于 margin-left:-200px和 margin-top:-150px
}
<body>
<div style="width:800px;height:600px;border:1px solid blue;position: relative;">
    <div class="my-div">
        父div高度宽度固定，相对定位；子div高度宽度固定，绝对定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;实现水平垂直居中。
    </div>
    <div style="width:200px;height:100px;border:1px solid yellow">
        我是子div2
    </div>
</div>
</body>

2、第二种

父div高度宽度固定，相对定位；子div高度宽度不定，绝对定位，使用top:50%;left:50%; transform: translate(-50%, -50%);实现水平垂直居中。

缺点就是子div脱离文档流

.my-div{
    border:1px solid red;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
<body>
<div style="width:800px;height:600px;border:1px solid blue;position: relative;">
    <div class="my-div">
       父div高度宽度固定，相对定位；子div高度宽度不定，绝对定位，使用top:50%;left:50%; transform: translate(-50%, -50%);实现水平垂直居中
    </div>
    <div style="width:200px;height:100px;border:1px solid yellow">
        我是子div2
    </div>
</div>
</body>

3、第三种

父div高度宽度固定，相对定位；子div高度宽度不定，绝对定位；使用 left:0;top: 0;bottom: 0;right: 0;margin: auto;实现水平垂直居中。

缺点就是子div脱离文档流

.my-div{
    width: 400px;
    height: 200px;
    border:1px solid red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
<body>
<div style="width:800px;height:600px;border:1px solid blue;position: relative;">
    <div class="my-div">
        父div高度宽度固定，相对定位；子div高度宽度不定，绝对定位；使用 left:0;top: 0;bottom: 0;right: 0;margin: auto;实现水平垂直居中
    </div>
    <div style="width:200px;height:100px;border:1px solid yellow">
        我是子div2
    </div>
</div>
</body>

4、第四种

父div高度宽度固定；子div高度宽度固定/不固定；使用flex布局实现水平垂直居中。子div未脱离文档流，不管子div高度宽度是否固定，都可以实现水平居中

缺点就是ie10+才支持使用flex布局实现水平垂直居中

.box{
    width:800px;
    height:600px;
    border:1px solid blue;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
}
.my-div{
    border:1px solid red;
}  
<body>
<div class="box">
    <div class="my-div">
        父div高度宽度固定；子div高度宽度固定/不固定，使用flex布局实现水平垂直居中。子div未脱离文档流
    </div>
</div>
</body>

5、第五种

父div高度宽度固定,相对定位；子div高度宽度固定，绝对定位，使用calc函数动态计算实现水平垂直居中。

缺点是子div未脱离文档流

.box{
    width: 800px;
    height: 600px;
    border: 1px solid blue;
    position: relative;
}
.my-div{
    position: absolute;
    width: 400px;
    height: 200px;
    left:-webkit-calc((800px - 400px)/2);
    top:-webkit-calc((600px - 200px)/2);
    left:-moz-calc((800px - 400px)/2);
    top:-moz-calc((600px - 200px)/2);
    left:calc((800px - 400px)/2);
    top:calc((600px - 200px)/2);
    border:1px solid red;
}　
<body>
<div class="box">
    <div class="my-div">
        父div高度宽度固定,相对定位；子div高度宽度固定，绝对定位，使用calc函数动态计算实现水平垂直居中。 子div未脱离文档流
    </div>
</div>
</body>

6、第六种

父div高度固定/不固定，子div不可设置高度宽度，实现水平垂直居中，此方式主要针对于文字内容的水平垂直居中。（注：去掉子div或用p代替子div一样可以使文字内容水平垂直居中）

 .box {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
     width: 800px;
     height: 600px;
     border:1px solid #666;
   }
   .my-div{
     /*width: 400px;*/
     /*height: 200px;*/
     border: 1px solid blue;
   }
<body>
<div class="box">
 <div class="my-div">
   父div高度固定/不固定，子div不可设置高度宽度，实现水平垂直居中，此方式主要针对于文字内容的水平垂直居中。（注：去掉子div或用p代替子div一样可以使文字内容水平垂直居中）
 </div>
</div>
</body>

凯迪blak

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现div水平垂直居中的几种方式

使div水平垂直居中的几种方式：1、第一种父div高度宽度固定，相对定位；子div高度宽度固定，绝对定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;实现水平垂直居中。缺点就是子div脱离文档流.my-div{ border:1px solid red; width:400px; height:3...
复制链接

扫一扫

专栏目录