全网最全实现元素（盒子图片）水平垂直方向居中

Posted 2021-08-19 усил

传送门

一、布局样式

盒子

<style>
  .son {
     width: 100px;
     height: 100px;
     background: red;
   } 
</style> 
<div class="box">
    <div class="son"></div> 
 </div>

图片

<style>
 img {
      height: 300px;
 }
</style>
<div class="box">
    <img src="../images/1.jpeg" alt=""> 
 </div>

父级

.box {
    width: 600px;
    height: 600px;
    background: skyblue;
    margin: 20px auto;
 }

方法一：手动计算 margin

• 图片
  • 给父级元素添加 text-align: center; 水平居中
  • 给图片添加 margin: 150px; (大盒子宽度/2 - 图片高度/2)
• 盒子
• 给盒子添加 margin-left: 250px; (大盒子宽度/2 - 盒子宽度 /2)
• 给盒子添加 margin-top: 250px; (大盒子高度/2 - 盒子高度 /2)

方法二：相对和绝对定位

• 图片（盒子）
  • 给图片（盒子）添加以下 css 样式
    • top: 0;
    • bottom: 0;
    • left: 0;
    • right: 0;
    • margin: auto; （重点）
    • position: absolute;
  • 给父级元素添加相对定位 position: relative;

方法三：偏移量

• 图片（盒子）
  • 给图片（盒子）添加以下 css 样式
    • top: 50%;
    • left: 50%;
    • margin-top: -150px; 负(自身高度的一半)
    • margin-left: -150px; 负(自身宽度的一半)
    • position: absolute;
  • 给父级元素添加相对定位 position: relative;

方法四：利用 css3 的位移

图片（盒子）

• 给图片添加以下 css 样式
  • transform: translate(50**%, 50%**);

方法五：弹性盒子

• 给父级元素添加以下 css 样式 （该方法图片和盒子都能居中）
  • display: flex; 弹性布局
  • justify-content: center; 水平居中
  • align-items: center; 垂直居中

方法六：vertical-align

• 给父元素添加伪元素（img使用vertical-align是需要“参考系”）

  box::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 100%;
        background: white;
        opacity: 0;
        vertical-align: middle;
   }
  

• 图片添加 vertical-align: middle;