在DIV CSS佈局的頁面裡，從佈局內容到頁面里文章文字居中都是非常重要的，而css來設置居中也是非常簡單的。
1、首先介紹使用css屬性讓整體佈局的居中：
設置對象的父級內容居中，這裡一個頁面的為父級是什麼呢？我們可以想像整個頁面的內容是由<html></html>和<body></body>這兩個包含，那根據較近父級我們就設置body的CSS來實現居中問題，可以向在內容里居中有text-align:center;具體css的居中代碼為：
body{text-aligh:center; } 但是即使這樣也會出現問題，因為你沒有設置佈局有多寬“width ”，一旦你內容佈局中在最外層css控制中，設置了float:屬性，那佈局將會向你設置的float:方向靠，解決方法，除了設置body的居中的css屬性外，還需對佈局對象設置居中，而且或定義寬度是多少，假如網頁寬度為700px，最外層css樣式為的class='weicheng'，那設置應該這樣“.weicheng{margin:0 auto; width:700px;} ”即可而這個元素在IE下有用，經過試驗在火狐等瀏覽器下只除了此父級（body）設置text-aligh:center;居中是無法讓佈局居中，那我們還需要對該對象設置個“ margin:0 auto ; ”這個是什麼意思呢，意思是內容上下為0距離，而左右為“auto ”自動，這樣就可以設置實現網頁佈局居中(這裡設置margin:5px auto; 一樣效果不影響實驗) 。完整實例為（可將代碼拷貝新建html文件瀏覽觀看效果）：
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd'><html xmlns='http://www.w3.org/1999/xhtml'>< /span>
<head> < /span>
<meta http-equiv ='Content-Type' content='text/html; charset=gb2312' />
<title>www .divcss5.com的CSS div的佈局居中實例</title>
<style type='text/css'>
<!--
body{ text-align:center; }
.waicheng {color: #0066CC; margin:5px auto; width:700px;
height:200px; border:1px solid #000000;}-->
</style>
</head>
<body> < /span>
<div class='waicheng'>我是css中的居中的實驗;我的佈局外層有一個邊為1px黑色邊，
我寬700px，高為200px,設置了與頂部內容距離為5PX</ div></body>
</html>
CSS佈局居中實例瀏覽
2、介紹使用css屬性讓網頁的背景居中：
這里居中就包括了左右居中與上下居中，居中代碼如下：
body{BACKGROUND: #FFF url(http://www.divcss5.com/img/css- logo.gif） no-repeat center;} //這段話意思就是讓css-logo.gif這個圖片設置背景不重複（no-repeat ），並將居中（center）這個居中是左右居中，而垂直不需要設置，自動會居中。
3、css讓介紹文字、圖片內容左右上下居中方法教程：
我們知道左右就中好辦，直接用text-align:center; 即可讓文字與圖片內容居中，但是垂直呢，假如我們在高度為120px的高度下垂直居中，圖片居中是vertical-align:middle;css屬性，文字居中就要靠設置行高方法居中文字內容，這裡我們設置為120px的高度這需要設置個line-height:120px;這樣就通過css屬性類樣式來實現文字與圖片的上下左右居中。
整個網站居中的代碼如下：
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd'><html xmlns='http://www.w3.org/1999/xhtml'>< /span>
<head> < /span>
<meta http-equiv ='Content-Type' content='text/html; charset=gb2312' />
<title>www .divcss5.com的CSS div的完整居中實例</title>
<style type='text/css'>
<!--
body{ text-align:center; margin:0 auto;
background:url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;}.waicheng {color: #0066CC; margin:5px auto;
width:700px; height:120px; line-height:120px; border:1px solid #000000; }.waicheng img {vertical-align:middle;}
-->
</style>
</head>
<body> < /span>
<div class='waicheng'>我是css中的居中的完整居中實例;
我的佈局外層有一個邊為1px
<img src='http://www.divcss5 .com/img/css-logo.gif' alt='圖片內容居中' /></< span class='tag-name' >div></body>
</html>
如需轉載，請註明文章出處和來源網址：http://www.divcss5.com/shili/s8.shtml
每天學一點·小白快速進階大神
推薦閱讀：
【51rgb】零基礎JavaScript視頻教程合集
【小白學堂】div內圖片文字如何水平居中對齊
【設計學院】網頁設計電商美工banner構圖四大法則
【css3】實現鼠標經過元素，上標線由中間向兩邊展開
【乾貨】你的網頁設計總是不好看是不是犯了這幾種錯誤
【配色】快速上手！ 10分鐘學會超好用的「九宮格」配色技巧
【設計學院】設計選擇怎樣的字體？掌握這七大套路設計無憂
設計｜DW教程｜AE教程｜前端資訊
微信ID：WEB_wysj
▲長按二維碼關注
▼戳閱讀原文入群免費領取全套視頻
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Center%20the%20layout%20in%20DIVCSSCenter%20the%20background%20imageCenter%20the%20text%20content.html
支付宝扫一扫 
评论列表（196条）
测试