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

Posted усил

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了全网最全实现元素(盒子图片)水平垂直方向居中相关的知识,希望对你有一定的参考价值。

传送门

一、布局样式

盒子

<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;

以上是关于全网最全实现元素(盒子图片)水平垂直方向居中的主要内容,如果未能解决你的问题,请参考以下文章

元素居中的几种方法

将一个不定宽高的盒子设置水平垂直居中的六种方法

怎么使用CSS让图片水平垂直都居中?

如何让DIV水平和垂直居中

总结div里面水平垂直居中的实现方法

图片水平垂直 居中