CSS：⼀个元素在⼀个容器中居中的⽅式
⽔平居中
⽅法⼀：使⽤样式text-align: center;
⽅法⼆：使⽤样式margin: 0 auto;
⽅法三：使⽤display: flex布局；
⽅法四：使⽤绝对定位的⽅式
<div class="parent">
<div class="child"></div>
</div>
.parent{
position: relative;
.
child{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
}
垂直居中：
⽅法⼀：使⽤样式vertical-align: middle(需要是⾏内元素，往往伴随着display: inline-block; 同时往往需要对于存在多个⼦元素时⽣效，所以当只存在⼀个元素⽽⼜需要⽤这种⽅式实现效果时，往往需要使⽤伪元素:before :after)；
⽅法⼆：使⽤display:flex布局；
⽅法三：使⽤绝对定位的⽅式
<div class="parent">
<div class="child"></div>
</div>
.parent{
position: relative;
.child{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
⽔平垂直居中，除了以上⼏种⽅式的结合之外，还可以通过以下⼏种⽅法实现：
⽅法⼀：使⽤display：table；display:table-cell;
⽅法⼆：使⽤display:flex布局
.box {css实现垂直水平居中
display: flex;
justify-content: center;
align-items: center;
}
⽇常笔记

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。