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

这篇文章主要介绍了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

左右居中方法1

左右居中方法2

上下居中

上下左右居中方法1

上下左右居中方法2

效果图：