CSS垂直居中总结

总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

CSS

提示：以下是本篇文章正文内容，下面案例可供参考

一、margin与transform的区别？

1.margin会导致其他盒子的位置变动
2.transform只会移动自身盒子并不会影响其他盒子的位置

二、css使盒子垂直居中的方法

1.position+margin

代码如下（示例）：

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

2.position+transform

代码如下（示例）：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

注意给父级容器加上相对定位position: relative;

3.flex布局

代码如下（示例）：

 display: flex;
 justify-content: center;
 align-items: center;

—注意需要应用在父级容器中才能使子盒子垂直

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。