元素垂直居中

最新推荐文章于 2023-02-08 23:23:37 发布

「已注销」

最新推荐文章于 2023-02-08 23:23:37 发布

阅读量78

点赞数

分类专栏： html/css

An angel who fell to earth……

本文链接：https://blog.csdn.net/qq_45039940/article/details/118739913

版权

html/css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了使用CSS实现元素垂直居中的四种常见方法：1) 使用Flexbox布局；2) 通过position和transform进行元素平移；3) 利用position和margin自动对齐；4) 结合position和直接设置偏移量。每种方法都有其适用场景，为开发者提供了灵活的选择。

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

元素垂直居中

🎄 position + transform

<div class="big">
    <div class="small"></div>
</div>
<style>
 .big {
     height: 300px;
     width: 300px;
     background-color: orangered;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .small {
     height: 100px;
     width: 100px;
     background-color: blue;
  }
</style>

🎄 position + transform 元素平移

<div class="big">
    <div class="small"></div>
</div>
<style>
 .big {
     height: 300px;
     width: 300px;
     background-color: orangered;
     position: relative;
  }
  .small {
     height: 100px;
     width: 100px;
     background-color: blue;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
  }
</style>

🎄 position + margin：auto

<div class="big">
    <div class="small"></div>
</div>
<style>
 .big {
     height: 300px;
     width: 300px;
     background-color: orangered;
     position: relative;
  }
  .small {
     height: 100px;
     width: 100px;
     background-color: blue;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
  }
</style>

🎄 position 需要确定父子元素的宽高

<div class="big">
    <div class="small"></div>
</div>
<style>
 .big {
     height: 300px;
     width: 300px;
     background-color: orangered;
     position: relative;
  }
  .small {
     height: 100px;
     width: 100px;
     background-color: blue;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -50px;
     margin-top: -50px;
  }
</style>