css不固定宽高居中

CSS中居中对齐是网页布局的常见需求，但是不同的情况下实现方法也不尽相同。其中，不固定宽高居中是一种典型的情况，下面我们来看一下如何实现它。

首先，我们需要明确一点：不固定宽高的元素是不能使用margin: auto;来居中的。如果你这样写了，你会发现元素并没有居中，而是黏在了最左边。

/* 这种写法并不能实现不固定宽高元素居中 */
.box {
  margin: auto;
} 

那么，正确的居中方式应该是什么呢？

我们要用到 CSS3 的新特性：flexbox。

在父元素上设置display: flex;，就可以使所有子元素自动排成一行，然后再加上justify-content: center;和align-items: center;这两条属性，就能让子元素居中了。

/* 不固定宽高元素居中写法 */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  /* 这里是子元素的样式，这里不做修改 */
} 

还有一种方法是用绝对定位position: absolute;，配合transform: translate(-50%, -50%);来实现居中。

/* 不固定宽高元素居中写法 */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

这样，我们就学会了如何实现不固定宽高元素居中了。下次遇到这种情况，就可以轻松愉快地解决它啦。