通常我们将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有关
