使用CSS实现div的居中显示，有多种方法，比较常用的，我做了一个总结。
工具/原料
1
VS Code
2
Chrome浏览器
方法/步骤
1
首先创建一个HTML，清除浏览器自带的样式。
2
创建一个div，设置长和高，再添加一个颜色，为了好的效果演示。 div { height: 200px; width: 300px; background-color: aquamarine; }
3
实现div的水平居中，主要使用的是margin属性的设置。
4
实现div的垂直和水平居中，采用的是绝对定位布局。div { height: 200px; width: 300px; background-color: aquamarine; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0;}
5
实现div的垂直和水平居中，使用transform属性。div { height: 200px; width: 300px; background-color: aquamarine; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}