這篇文章給大家分享的是有關css div如何居中顯示的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
css div居中顯示的方法：1、使用absolute絕對定位，代碼為【
absolute居中定位 】；2、使用translate定位；3、使用margin居中定位；4、使用fixed的居中定位。
css div居中顯示的方法：
1、absolute 絕對定位 這是我們最常用的一種居中定位寫法 要求必須確定div的寬高度 目前市面上的瀏覽器基本上都支持這種寫法
<html>
<head>
<meta charset="UTF-8">
<title>absolute居中定位</title>
<style>
*{margin:0;padding:0}
.absoluteCenter{ width:600px; height:400px;position:absolute; background: rgb(50,183,97); left:50%; top:50%; margin-left: -300px; margin-top: -200px; }
</style>
</head>
<body>
<div>我是absolute居中定位</div>
</body>
</html>2、translate定位 這是css3 transform的屬性 通過自身的偏移來定位 而且他有個極大的好處 不需要知道div的寬高度 就像js里的this self一樣 可以將寬高度設為百分比 IE browser<IE9不支持 在移動端使用較好
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>translate居中定位</title>
<style>
*{margin:0;padding:0}
.translateCenter{ width: 40%; height: 20%; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: #2d2d2d;}
</style>
</head>
<body>
<div>我是translate居中定位</div>
</body>
</html>3、margin居中定位 不需要確定div的寬高度 讓top,bottom,left,right都為0 再加個margin:auto 神來之筆 IE browser< IE 8不支持
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>margin居中定位</title>
<style>
*{margin:0;padding:0}
.marginCenter{ width:200px; height: 200px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; background: #f2056e;}
</style>
</head>
<body>
<div>我是margin居中定位</div>
</body>
</html>4、fixed的居中定位 這個用的最多的可能就是導航條這塊兒 讓導航條居中顯示不隨頁面滾動
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>fixed居中定位</title>
<style>
*{margin:0;padding:0}
.fixedCenter{max-width:980px; height:70px; position:fixed; margin:0 auto; left:0; right:0; background:rgb(67,163,244);}
</style>
</head>
<body>
<div>我是fixed居中定位</div>
</body>
</html>感謝各位的閱讀！關于“css div如何居中顯示”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
