div居中代碼 DIV水平居中顯示CSS代碼

2018-09-07

div居中代碼 DIV水平居中顯示CSS代碼

如何使用CSS讓DIV居中顯示，讓div水平居中有哪些CSS樣式呢？

需要的主要css代碼有兩個，一個為text-align:center(內容居中)，另外一個為margin:0 auto；其兩個樣式需要配合使用才能實現div盒子的居中顯示排版。

首先我們對body設置text-align:center，再對需要居中的div盒子設置css樣式margin:0 auto，這樣即可讓對應div水平居中。

實例講解div居中代碼應用，為了觀察div居中效果，我們對div設置一個div命名為“.div”在html中div標簽內使用class=“div”,設置其寬度為400px;高度為100px，邊框為紅色。以便我們觀察效果。

1、完整html+css代碼

html>

div居中?在線演示?www.divcss5.com

body{?text-align:center}

.div{?margin:0?auto;?width:400px;?height:100px;?border:1px?solid?#F00}

/*?css注釋：為了觀察效果設置寬度?邊框?高度等樣式?*/

DIVCSS5實例

2、div+css居中實例截圖

div實現居中效果截圖

3、div居中代碼應用特點

此居中方法是讓div居中效果完美兼容各大平臺、兼容各大瀏覽器，無論高版本ie還是高版本的ie均兼容。

4、在線演示：查看案例

5、打包下載：

立即下載 (1KB)

6、居中相關CSS教程

1)、div居中

2)、css字體居中

3)、div圖片居中

4)、css垂直居中

5)、css背景居中

6)、div內容居中

7)、div align center

8)、ie9不能垂直居中

9)、css居中

如需轉載，請注明文章出處和來源網址：http://www.divcss5.com/rumen/r622.shtml

我要分享到：

上一篇：div css margin-left認識與實例

下一篇：DIV滾動條設置添加 CSS滾動條顯示與滾動條隱藏

必備CSS教程 Essential CSS Tutorials

·css height

·css line-height

·css width

·css min-width

·css max-width

·css min-height

·css max-height

·css border

·css background

·css float

·css clear

·css display

·css font

·css text-transform

·css英文首字母大寫

·css font-variant

·css font-weight

·css font-style

·css text-decoration

·css 刪除線

·div css 虛線

·css 注釋

·html 注釋

·css padding

·css margin

·css 文本

·css font-size

·css font-family

·css color

·css text-align

·css text-indent

·css 超鏈接(css a)

·css 優化壓縮

·css id(css #)

·css class(css .)

·css ul li列表

·css 圓角圓邊

·css 父級子級

·css 指針概念

·css cursor

·css overflow

·html px em pt網頁單位

·CSS important

·CSS position

·css z-index

·css white-space

·css img圖片

·css class id

·css link與@import區別

·css 選擇器

·css引入html

必備HTML基礎教程 Essential HTML Tutorials

·html img圖片標簽

·html em標簽(EM強調標簽)

·html strong加粗(strong標簽)

·html B加粗(b加粗標簽)

·strong與B加粗區別

·h1 h2 h3 h4標簽(html標題標簽)

·html A超鏈接錨文本

·html注釋

·html head頭部標簽

·html title標題標簽

·html meta標簽

·html link標簽

·html i斜體標簽

·html u下劃線標簽

·html s刪除線標簽

·html換行br標簽

·html p段落標簽

·p標簽與br標簽區別

·html div標簽元素

·html span標簽

·html font標簽

·html script標簽

·html px em pt網頁單位

·html ul li列表

·ol li列表

·dl dt dd標簽組

·table tr td表格

·table tr th表格

·html form表單

·html form input

·html form textarea文本區域

·html select下拉與跳轉(Html select)

·html iframe框架

·html網頁結構

·htm html shtml區別用法

·網頁編碼charset

·UTF-8 GBK UTF8 GB2312區別聯系

·先寫html還是先寫CSS

·顯示擴展名

·html標簽大全集合

·html常用標簽

·網頁源代碼是什么

如對文章有任何疑問請提交到DIV CSS論壇，或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。

CSS教程文章修訂日期：2013-09-25 17:37 原創：DIVCSS5

本文www.divcss5.com DIVCSS5版權所有。

免責聲明：本文僅代表文章作者的個人觀點，與本站無關。其原創性、真實性以及文中陳述文字和內容未經本站證實，對本文以及其中全部或者部分內容文字的真實性、完整性和原創性本站不作任何保證或承諾，請讀者僅作參考，并自行核實相關內容。

http://www.pinlue.com/style/images/nopic.gif

總結

以上是生活随笔為你收集整理的css居中显示代码怎么写,div居中代码 DIV水平居中显示CSS代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。