如何居中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%);

}