【HTML重点】之元素水平垂直居中

最新推荐文章于 2023-09-18 15:02:14 发布

夹心776655

最新推荐文章于 2023-09-18 15:02:14 发布

阅读量210

点赞数

分类专栏： HTML&CSS重要概念

本文链接：https://blog.csdn.net/qq_37086980/article/details/109855161

版权

HTML&CSS重要概念专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如何实现文本/图片/盒子水平垂直居中？

1) 文本水平垂直居中

水平居中: text-align: center;
垂直居中: height = line-height

.box{
    height: 50px;
    line-height: 50px;
    text-align: center;
}

2) 图片水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何实现图片水平垂直居中</title>
    <style>
        .parent{
            display: table-cell;
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            text-align: center; 
            vertical-align: middle;
        }
        .parent > img{
            width: 50px;
            height: 50px;
        }
       
    </style>
</head>
<body>
    <div class="parent">
         <img src="../images/icon24.png" alt="">
    </div>
</body>
</html>

结果：

3）盒子垂直居中

1.如果.parent的height不写, 只需要padding:10px 0; 就能将.child垂直居中

如果.parent的height写死，就很难把.child居中

 <style>
        .parent{
            width: 200px;
            border: 1px solid #333;
            padding: 10px 0;
        }
        .child{
            width: 50px;
            height: 50px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

结果：

2.table自带功能(td 默认vertical-align:middle)

3.div封装成table或者设置display:table-cell;

4.margin-top: -50%

5.translate:-50%

6.absolute margin auto

7.flex布局 (align-items: center; justify-content: center;)

4）盒子水平垂直居中（重点!!!）

1.Margin负值 + 定位, 前提: 盒子有宽高, 定位模式只能是absolute | fixed

.box{
    width: 424px;
    height: 506px;
    background-color: pink;
     
    position: fixed | absolute;
    left: 50%;
    top: 50%;
    margin-top: -253px;
    margin-left: -212px;
}

2. margin: auto + 定位, 前提: 盒子有宽高, 定位模式只能是absolute, fixed

.box{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

3. margin 定位 + 位移transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        .wrap{
            width: 500px;
            height: 300px;
            border: 2px solid #000;
            margin: 0 auto;
            position: relative;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top:50%;

            /* 向左向上移动自身一半 */
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
</html>

4.flex弹性盒

.wrap{
    width: 500px;
    height: 300px;
    border: 2px solid #000;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
     width: 100px;
     height: 100px;
     background-color: red;
}

结果:

5.JS动态实现盒子水平垂直居中(不考虑滚动和缩放屏幕)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现垂直居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            position: absolute;
        }
        button{
            width: 30px;
            height: 20px;
            float: right;
        }

    </style>
</head>
<body>
    <div>
        <button>X</button>
    </div>
    <script>
        // 1.获取盒子div
        var div = document.querySelector('div');
        console.log(div);
       
        // 2. 首先获取当前屏幕的高度和宽度
        var ch = document.documentElement.clientHeight;
        var cw = document.documentElement.clientWidth;
        console.log(ch, cw);
        
        // 3. 获取div的实际宽和高, 即占位宽
        var dh = div.offsetHeight;
        var dw = div.offsetWidth;
        console.log(dh, dw);

        // 4. 计算需要移动的top与left
        var mt = (ch - dh)/2;
        var ml = (cw - dw)/2;
        console.log(mt, ml);

        // 5.设置div属性
        div.style.top = mt + 'px';
        div.style.left = ml + 'px';
    </script>
</body>
</html>

结果: