div水平垂直居中

最新推荐文章于 2022-11-22 23:35:20 发布

茹LYR

最新推荐文章于 2022-11-22 23:35:20 发布

阅读量164

点赞数

分类专栏： CSS 文章标签：水平居中垂直居中 div居中

本文链接：https://blog.csdn.net/qq_43155489/article/details/100018065

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

比较常用的三种div水平垂直居中的方法

div绝对定位水平垂直居中（margin:auto实现绝对定位元素的居中），兼容性：IE7及之前版本不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            background-color: red;
            //水平垂直居中的重点
            position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

css不定宽高水平垂直居中 (常用的)，固定高度页面里的div水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 300px;  //必须设置高度
            //水平垂直居中的重点
            display:flex;
            justify-content:center;
            align-items:center;
        }
        div{
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现页面里的div水平、垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
           //设置宽高可以明显的看效果
            height: 500px;
            width: 500px;  
            //水平垂直居中的重点
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        div{
            height: 100px;
            width: 100px;
            background-color: red;
             //水平垂直居中的重点
            display: inline-block;

        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

茹LYR

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div水平垂直居中

比较常用的三种div水平垂直居中的方法div绝对定位水平垂直居中（margin:auto实现绝对定位元素的居中），兼容性：IE7及之前版本不支持<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&...
复制链接

扫一扫

专栏目录