你一定不知道div里的图片是如何水平垂直居中的

1. 背景介绍

在前端开发中，如何将元素（图片、文字等）水平垂直居中是一个比较常见的需求。尤其是在页面布局中，为了使页面更加美观，我们往往需要将元素居中显示。本文将介绍在div里面如何实现图片的水平垂直居中。

2. 实现方法

2.1 使用Flexbox布局

Flexbox布局是CSS3引入的新的一种布局方式，通过父元素display属性为flex，即可实现flex布局。使用Flexbox布局，可以轻松地实现元素的水平垂直居中。

下面是一段实现图片水平垂直居中的代码：

<div class="parent">

  <img src="example.jpg" class="child">
</div>
// CSS代码
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  max-width: 100%;
  max-height: 100%;
}

以上代码中，display属性被设置为flex，使得.parent变成了一个flex容器。justify-content属性和align-items属性分别设置了其内部元素在主轴和侧轴上的位置。由于图片的宽高比例可能与父元素不一致，因此还需要设置其最大宽度和最大高度，以免图片变形。

这种方法优点是代码比较简洁，使用方便，适用于大部分情况下。

2.2 通过负边距和绝对定位实现

除了Flexbox布局，也可以通过负边距和绝对定位的方法来实现元素的居中。具体方法是利用CSS中的position属性和calc()函数计算出元素应该位于父元素的哪个位置。

下面是一个利用负边距和绝对定位的方式实现图片水平垂直居中的代码：

<div class="parent">

  <img src="example.jpg" class="child">
</div>
// CSS代码
.parent {
  position: relative;
}
.child {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: calc(50% - (height of child / 2));
  left: calc(50% - (width of child / 2));
}

以上代码中，父元素的position属性设置为relative，使得子元素的绝对定位是相对于父元素的位置计算的。通过top和left属性设置子元素的上下左右偏移量，使其位于父元素的中央。

这种方法的优点是兼容性比较好。缺点是需要计算子元素的尺寸，并且代码比较冗长。

3. 总结

本文介绍了两种在div里面实现图片水平垂直居中的方法：使用Flexbox布局和通过负边距和绝对定位实现。其中，使用Flexbox布局的方法代码简单、使用方便；而通过负边距和绝对定位实现的方法兼容性好，但需要计算子元素的尺寸。

在实际开发中，可以根据具体情况选择合适的方法。