html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法

html元素 水平居中 于 其父级元素的方法：

方法1：

复制代码代码如下:

左右居中方法1

复制代码代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.left-right-middle1{

width:200px;

background-color:#69F;

margin:0 auto;

}

方法2：

复制代码代码如下:

左右居中方法2

复制代码代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.left-right-middle2{

width:200px;

background-color:#69F;

left:50%;

margin-left:-100px;

}

html元素 垂直居中 于 其父级元素的方法：

复制代码代码如下:

上下居中

复制代码代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.top-bottom-middle{

height:200px;

background-color:#69F;

top:50%;

margin-top:-100px;

}

html元素 水平垂直居中 于 其父级元素的方法：

方法1：

复制代码代码如下:

上下左右居中方法1

复制代码代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.all-middle1{

width:200px;

height:200px;

background-color:#69F;

top:50%;

margin:-100px auto 0;

}

方法2：

复制代码代码如下:

上下左右居中方法2

复制代码代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.all-middle2{

width:200px;

height:200px;

background-color:#69F;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

}

完整代码：

复制代码代码如下:

Div Middle

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.left-right-middle1{

width:200px;

background-color:#69F;

margin:0 auto;

}

.left-right-middle2{

width:200px;

background-color:#69F;

left:50%;

margin-left:-100px;

}

.top-bottom-middle{

height:200px;

background-color:#69F;

top:50%;

margin-top:-100px;

}

.all-middle1{

width:200px;

height:200px;

background-color:#69F;

top:50%;

margin:-100px auto 0;

}

.all-middle2{

width:200px;

height:200px;

background-color:#69F;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

}

左右居中方法1

左右居中方法2

上下居中

上下左右居中方法1

上下左右居中方法2

效果图：