溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“div居中與div內容居中的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
應用margin:0 auto
凹凸為0，支配自順應的css格局。
要讓div水準居中，那么除了配置css margin:0 auto外，還不克不及再設置裝備擺設float，不然將會導致div靠左（設置float:left）與div靠右（配置float:right）。
1、div結構居中實例代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div組織居中實例 CSS5</title>
<style>
#jz{ margin:0 auto; width:320px; height:100px; border:1px solid #F00}
</style>
</head>
<body>
<div id="jz">配置margin:0 auto兼容各大閱讀器讓div水平居中</div>
</body>
</html>2、截圖
div盒子水準居中截圖
以上實例正是運用margin:0 auto讓div兼容各大閱讀器的水準居中。
模式居平分為div模式程度居中與div模式垂直居中。
div內容水平居中相比構造div居中，而div形式居中對比簡單，只緊要配置一個形式居中css（text-align:center）、形式垂直居中（line-height）便可。
1、div形式水準居中CSS：
text-align:center
不管是p照常div都或者對其設置裝備擺設此CSS實現對應答象內的模式水平居中。
2、div內容垂直居中 行高屬性：
line-height
要讓div內只有一行的形式垂直居中，通常對div配置的height(高)與line-height(行高)溝通，就可實現div模式垂直居中。
3、div內容水平居中與垂直居中實例代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div形式居中實例 CSS5</title>
<style>
#juzhong{width:320px;height:100px; line-height:100px; text-align:center; border:1px solid #F00}
</style>
</head>
<body>
<div id="juzhong">text-align和line-height配置水平與垂直居中</div>
</body>
</html>4、截圖
div形式水準居中與div模式垂直居中布局實例
從上圖大約看見div內容完成兩者狀況下居中，但沒有設置裝備擺設margin:0 auto而div不有水準居中。
可以或許實例下再將以上代碼拷貝后，問鼎DIV布局居中代碼嘗嘗實現DIV的居中。
“div居中與div內容居中的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
