CSS关于实现当父元素宽高未知时，内容的居中

今天我们来讨论一下关于html中常见的关于元素居中的问题：

首先我们初始化一个盒子，盒子里面放一张图片（这里的图片是随便找的一张）

首先对盒子初始化：

 随意给img一个宽高和背景颜色便于观察

方法1：  利用弹性盒实现居中；

方法优缺点：

优点：看实现方式可以发现

1.我们完全不需要知道盒子与盒子内的图片的宽高就能实现盒子内元素的居中，

2.代码简洁，只需要几行就能实现

缺点：

display：flex；是css3的新增属性，有低版本的兼容问题

方法2.    利用定位居中；

    首先给父元素盒子定义相对定位来充当内容的参照物

再对盒子中图片使用绝对定位

 

优点：可以实现未知宽高的盒子中未知宽高的内容居中

缺点：绝对定位会脱离文本流

方法3.   利用定位居中的另一种实现方法

首先给父元素盒子定义相对定位来充当内容的参照物

再对盒子中图片使用绝对定位

 缺点transform是css3属性，容易有兼容问题

方法4： 利用对行内块元素的vertical-align：middle来实现居中

首先在我们要实现居中的img前加上一个盒子

 将添加的盒子的元素类型转化为行内块元素，给上高度100%，宽度0，使用vertical-align:middle

得到：

我们会发现img并没有垂直居中，而且离左边还有一定间距，所以

先也给img一个vertical-align:middle;

得到：

现在垂直居中了，要实现水平居中首先需要先去掉行内块元素自带的间距

再利用text-aligm：center；

 若还有别的方法来实现未知宽高的居中欢迎留言补充