HTML中设置元素水平居中的方案

最新推荐文章于 2024-04-12 11:37:26 发布

从明天开始好好学习前端

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量485

点赞数 5

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/l12345666777/article/details/134190011

版权

1.给父元素设置padding,padding:(父height-子height)/2(上下) (父width-子width)/2(左右),给父元素设置为border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 220px;
            height: 260px;
            background-color: red;
            margin: 0 auto;
            /* 1.2 */
            border: 1px solid red;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 1.1通过margin挤压   左右外边距 父元素宽-子元素宽/2        上下外边距 父元素高-子元素高/2 */
            margin: 80px 60px;
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器运行结果如下：

2.通过margin挤压，给子元素设置margin:(父height-子height)/2(上下) (父width-子width)/2(左右) 给父元素设置一个边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 220px;
            height: 260px;
            background-color: red;
            margin: 0 auto;
            /* 2.1给父元素设置padding */
            padding: 80px 60px; 
            /* 2.2将父元素设置为border-box */
            box-sizing: border-box; 
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器运行结果如下：

3.子绝父相,子元素设置top,bottom,left,right全部为0 margin:auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 220px;
            height: 260px;
            background-color: red;
            margin: 0 auto;
            /* 3.1给父元素设置相对定位 */
            position: relative; 
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 3.2子元素绝对定位  配合属性全部为0 margin：auto */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto; 
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器运行结果如下：

4.子绝父相,子元素设置top:50%,left:50%,margin-left:-子元素宽度/2 margin-top:-子元素高度/2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 220px;
            height: 260px;
            background-color: red;
            margin: 0 auto;
            /* 4.1给父元素设置相对定位 */
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;

            /* 4.2给子元素绝对定位 top：50%  left：50%  margin-left：-width/2  margin-top：-height/2 */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器运行结果如下：

5.给父元素设置display:flex 给子元素设置 margin:auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 200px;
            height: 200px;
            background-color: red;
            /* margin: 0 auto; */
            /* 1.1给父元素设置为伸缩盒 */
            display: flex;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 1.2给子元素设置margin：auto */
            margin: auto; 
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器运行结果如下：

6.给父元素设置display:flex;justify-content:center;align-items:cente

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 2.给父元素设置伸缩盒 设置主轴和交叉轴弹性元素排列方式都为center */
            display: flex;
            /* 设置弹性元素在主轴居中对齐 */
            justify-content: center;
            /* 设置弹性元素在交叉轴居中对齐 */
            align-items: center;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器运行结果如下：

从明天开始好好学习前端

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML中设置元素水平居中的方案

1.给父元素设置padding,padding:(父height-子height)/2(上下) (父width-子width)/2(左右),给父元素设置为border-box。2.通过margin挤压，给子元素设置margin:(父height-子height)/2(上下) (父width-子width)/2(左右) 给父元素设置一个边框。4.子绝父相,子元素设置top:50%,left:50%,margin-left:-子元素宽度/2 margin-top:-子元素高度/2。
复制链接

扫一扫