html div布局居中,CSS div完美居中

1. div水平居中

css的代码中主要俩个属性：text-align:center和margin:0 auto，这俩个属性配合使用可使DIV居中。

IT小奋斗

body{

text-align:center;

margin:0px;

}

div{

margin:0 auto;

width:800px;

height:50px;

border:1px solid red;

background-color: aquamarine;

color:blue;

}

我要水平居中

2. div垂直居中

实现垂直居中通过position: absolute，生成绝对定位的元素，位置通过left,top,right以及bottom属性进行规定。

position属性默认为static，忽略 top, bottom, left, right 或者 z-index 声明。

javascript操作语法：object.style.position='absolute'。

IT小奋斗

body{

text-align:center;

margin:0px;

vertical-align:middle;

}

div{

margin:0 auto;

position: absolute;

width:800px;

height:50px;

left: 50%;

top: 50%;

margin-left: -400px;

margin-top: -25px;

border:1px solid red;

background-color: aquamarine;

color:blue;

}

我要垂直居中