盒子水平垂直居中的方法

最新推荐文章于 2023-11-03 10:33:06 发布

@是静静啊

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量227

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/m0_45272038/article/details/113752066

版权

盒子水平垂直居中的方法

方法一：通过绝对定位的方式 absolute + 负margin——需要知道元素的宽高

思路：
给父元素相对定位
给子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的宽度一半。
margin-top: 负的高度一半；

<!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>
        #container{
            border: 1px solid #000;
            height: 600px;
            width: 600px; 
            position: relative;
            margin: auto;  
            /* 在父元素设置了相对定位  所以 margin：auto；可要可不要 都会居中 */
            /* 但如果box不是其子元素  而是兄弟元素或者其他就要加margin：auto； */
        }
        #box{
            background-color: pink;
            position: absolute;
            left:50%;
            top:50%;
            width: 100px;
            height: 100px;
            margin: -50px -50px;
        } 
    </style>
</head>
<body>
    <div id="container">
        <!-- <div id="box"></div> -->
    </div>
    <div id="box"></div>
</body>
</html>

方法二：通过绝对定位的方式 absolute + margin auto——不需要知道宽高

这个是需要将各个方向的距离都设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>
        #container{
            border: 1px solid #000;
            height: 600px;
            width: 600px; 
            position: relative;
        }
        #box{
            background-color: pink;
            position: absolute;
            left:0;
            top:0;
            right: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
            margin: auto;
        } 
    </style>
</head>
<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>
</html>

方法三：absolute + calc（计算）——需要知道元素宽高

这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了

calc:任何长度值都可以使用calc()函数进行计算；

calc()函数使用标准的数学运算优先级规则；

它支持 “+”, “-”, “*”, “/” 运算

<!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>
        #container{
            border: 1px solid #000;
            height: 600px;
            width: 600px; 
            position: relative;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            /* 注意用calc计算属性时 可以有 '+、- * /'  但是注意符号旁边一定要空格 */
            left:calc(50% - 50px);
            top:calc(50% - 50px);
        } 
    </style>
</head>
<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>
</html>

方法四：平移定位+transform——不需要知道元素宽高

修复绝对定位的问题，还可以使用css3新增的transform，transform的translate

属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了

<!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>
        #container{
            border: 1px solid #000;
            height: 600px;
            width: 600px; 
            position: relative;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate( -50%,-50%);
            /*兼容*/
			-webkit-transform: translate(-50%, -50%); 
			-ms-transform: translate(-50%, -50%); 
			-moz-transform: translate(-50%, -50%); 
        } 
    </style>
</head>
<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>
</html>

方法五：table-cell——不需要知道元素宽高

需要知道父元素的宽高
父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;

优点： tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

缺点：这个不是table的正确方法，不是很建议使用，但是也是可以实现的

<!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>
        #container {
            display: table-cell;
            vertical-align: middle;
            width: 240px;
            height: 180px;
            border: 1px solid #666;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>

</html>

方法六：弹性盒子的方式——不需要知道元素宽高

<!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>
        #container {
            border: 1px solid #000;
            height: 600px;
            width: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>

</html>

方法七：grid（网格布局）

给父级设display:grid;

给子元素设align-self: center;justify-self: center;

优点：代码量少

缺点：兼容不如flex，建议用flex

<!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>
        #container {
            border: 1px solid #000;
            height: 600px;
            width: 600px;
            display: grid;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            align-self: center;
            justify-self: center;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>

</html>