将子盒子定位到父盒子正中间

通常我们将div水平居中，可以通过margin:0 auto，还有text-align:center等方法；但是如果我的子元素使用了定位，以上方法都没法用了。

image.png
蓝色的子元素通过绝对定位将它定位在在了底部，如何将它基于父级黄色元素水平居中呢？
答案使用 transform,如：left: 50%;transform: translate(-50%)

上代码

html

<div class="main">
  <div class="p-ele">
      <div class="c-ele pos-ele">把自己挂起来</div>
      <div class="c-ele con-ele">我是内容我是内容我是内容我是内容我是内容</div>
  </div>
</div>

css

div{
  box-sizing: border-box;
}
.main{
  height: 500px;
  background: #fff;
  display：flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.p-ele{
  width:300px;
  height: 300px;
  background: yellow;
  display:flex;
  flex-direction: column;
  position:relative;
  margin: auto 0;
  padding-top: 100px;
}
.c-ele{
  text-align:center;
}
.pos-ele{
  width: 200px;
  height: 50px;
  background: blue;
  position:absolute;
  bottom: -25px;
  //将定位元素居中
  left: 50%;
  transform: translate(-50%);
}
.con-ele{
  height: 100px;
  background: green;
}

image.png

垂直居中我们也可以使用同样的方法,改变位移参数 transform: translate(0， -50%);，注意，translate参数的正负符号，和我们定位使用的是top或bottom，和right或left有关