水平垂直居中

最新推荐文章于 2025-03-10 08:45:00 发布

原创最新推荐文章于 2025-03-10 08:45:00 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了五种在CSS中实现元素居中的方法：1) 使用相对定位和自动外边距；2) 通过设置左右顶部和底部为0，然后使用负的margin值；3) 应用transform属性进行平移；4) 利用flexbox布局居中；5) 使用老式的盒模型配合CSS盒对齐。这些方法涵盖了不同场景下的居中需求。

1.
 .father{
     width:200px;
     height:200px;
     position: relative;
 }
 .child {
     width:100px;
     height:100px;
     position: absolute;
     top: 0;
     left:0;
     right:0;
     bottom: 0;
     margin-left: auto;
 }
2. .child {
      width:100px;
     height:100px;
      position: absolute;
      left: 50%;
      top:50%;
      margin-left: -100px;
      margin-top: -100px;
}
3. .child {
   width:100px;
     height:100px;
      position: absolute;
      left: 50%;
      top:50%;
      transform: translate(-50%, -50%)
}

4.  
 .father{
     width:200px;
     height:200px;
     display: flex;
     /*主轴上水平居中*/
     justify-content: center;
    /*副轴上水平居中*/
    align-items:center
 }
5.
.child{
      display:-webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align:center;
}

在这里插入图片描述