css一个盒子水平居中和隐藏的方法

最新推荐文章于 2024-07-20 22:27:34 发布

suanron

最新推荐文章于 2024-07-20 22:27:34 发布

阅读量137

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/suanron/article/details/119828112

版权

1.盒子水平居中

（1）margin：0 auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             background-color: rgb(23, 31, 31);
             width: 300px;
             height: 160px;
            
         }
         p{
             background-color: blue;
             width: 120px;
             height: 90px;
             margin: 0 auto;
         }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

（2）transform：translate（）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             background-color: rgb(23, 31, 31);
             width: 300px;
             height: 160px;
            
         }
         p{
             background-color: blue;
             width: 120px;
             height: 90px;
             transform: translate(90px,0);
         }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

（3）display：flex；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             background-color: rgb(23, 31, 31);
             width: 300px;
             height: 160px;
             display: flex;
             justify-content: center;
            
         }
         p{
             background-color: blue;
             width: 120px;
             height: 90px;
             margin-top: 0;
         }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

（4）position：relative；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             background-color: rgb(23, 31, 31);
             width: 300px;
             height: 160px;
         }
         p{
             background-color: blue;
             width: 120px;
             height: 90px;
             margin-top: 0;
             position:relative;
             left: 90px;
         }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

2.隐藏元素

（1）transform：scale（，）；占据屏幕空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             background-color: rgb(23, 31, 31);
             width: 300px;
             height: 160px;
         }
         p{
             background-color: blue;
             width: 120px;
             height: 90px;
             transform: scale(0,0);
          
         }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

（2）visibility：hidden；占据屏幕空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             background-color: rgb(23, 31, 31);
             width: 300px;
             height: 160px;
         }
         p{
             background-color: blue;
             width: 120px;
             height: 90px;
            visibility: hidden;
         }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

（3）overflow：hidden；不占据原先位置

当子元素浮动时，父元素背景不显示，如图一所示

图1

给父元素清除浮动，背景显示

（4） opacity：0；占据屏幕空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             background-color: rgb(23, 31, 31);
             width: 300px;
             height: 160px;
         }
         p{
            background-color: royalblue;
             margin: 0;
             width: 120px;
             height: 90px;
             opacity: 0;
         }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>