如何居中div?

1、首先创建一个HTML，清除浏览器自带的样式。<style> body { margin: 0; padding: 0; }</style>

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%);}