您的位置首页百科问答

如何居中div

如何居中div

的有关信息介绍如下:

如何居中div

使用CSS实现div的居中显示,有多种方法,比较常用的,我做了一个总结。

首先创建一个HTML,清除浏览器自带的样式。

创建一个div,设置长和高,再添加一个颜色,为了好的效果演示。

div {

height: 200px;

width: 300px;

background-color: aquamarine;

}

实现div的水平居中,主要使用的是margin属性的设置。

实现div的垂直和水平居中,采用的是绝对定位布局。

div {

height: 200px;

width: 300px;

background-color: aquamarine;

position: absolute;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

实现div的垂直和水平居中,使用transform属性。

div {

height: 200px;

width: 300px;

background-color: aquamarine;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}