本篇內容介紹了“html元素水平居中、垂直居中、水平垂直居中于其父級元素的方法教程”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創(chuàng)新互聯(lián)建站成立與2013年，先為紅寺堡等服務建站，紅寺堡等地企業(yè)，進行企業(yè)商務咨詢服務。為紅寺堡企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

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

方法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：

代碼如下:

代碼如下:

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：

代碼如下:

代碼如下:

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：

代碼如下:

代碼如下:

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;
}

完整代碼：

代碼如下:

效果圖：

“html元素水平居中、垂直居中、水平垂直居中于其父級元素的方法教程”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

分享標題：html元素水平居中、垂直居中、水平垂直居中于其父級元素的方法教程-創(chuàng)新互聯(lián)
文章位置：http://weahome.cn/article/cdiooo.html