盒子上下左右居中

红烧四喜丸子

已于 2022-08-18 10:11:33 修改

阅读量255

点赞数 5

文章标签： javascript typescript html5 css css3

于 2022-04-13 15:49:53 首次发布

本文链接：https://blog.csdn.net/weixin_56529964/article/details/124149723

版权

本文介绍了多种使用CSS实现元素居中和对齐的方法，包括绝对定位、相对定位、使用flexbox和grid布局等。通过实例代码展示了如何将元素在页面上精确地垂直和水平居中，帮助开发者掌握不同场景下的布局策略。

摘要由CSDN通过智能技术生成

#1
    img {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
        }

#2
    body{
          margin: 0;
          height: 600px;
          position: relative;
      }
      .box{
          width: 300px;
          height: 300px;
          background-color: aquamarine;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -150px;
          margin-top: -150px;
      }
      img{
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
      }

#3
    body{
            margin: 0;
            height: 600px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
        }
        img{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

#4
    .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            display: inline-block;
        }

#5
    body{
             display: -webkit-box;
         }
         .box{
             width: 200px;
             height: 200px;
             background-color: aquamarine;
             display: -webkit-box;
         }
         .box1{
             width: 50px;
             height: 50px;
             background-color: red;
             display: -webkit-box;
             margin: auto;
         }

#6
    body{
            margin: 0;
        }
         html,body{
             width: 100%;
             height: 100%;
             display: flex;
         }
         .box{
             width: 200px;
             height: 200px;
             background-color: aquamarine;
             display: flex;
             margin: auto;
         }
         .box1{
             width: 50px;
             height: 50px;
             background-color: red;
             display: flex;
             margin: auto;
         }

#7
    body{
            margin: 0;
        }
         .box{
             width: 200px;
             height: 200px;
             background-color: royalblue;
             display: -webkit-box;
             -webkit-box-pack: center;
             -webkit-box-align: center;
         }
         .box1{
             width: 50px;
             height: 50px;
             background-color: red;
         }

#8
    .box{
             width: 200px;
             height: 200px;
             background-color: aqua;
             position: relative;
         }
         .box1{
             position: absolute;
             left: 50%;
             top:50%;
             transform: translate(-50%,-50%);
             width: 50px;
             height: 50px;
             background-color: red;
         }

#9
    .box{
          width: 500px;
          height: 500px;
          position: relative;
          border: 1px solid yellow;
          display: grid;
        }
        img{
            justify-self: center;
            align-self: center;
        }