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

满意答案

ybknf

2016.05.10

采纳率：58%    等级：8

已帮助：2760人

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

效果图：

32分享举报