html如何将元素整体居中,html元素水平居中的方法

html元素水平居中的方法

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

方法1：

代码如下:

上下左右居中方法1

代码如下:

html,body,p{

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,p{

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;

}

完整代码：

代码如下:

p Middle

html,body,p{

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;

【html元素水平居中的方法】相关文章：