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

2018-09-07

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

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

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

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

實例講解div居中代碼應(yīng)用，為了觀察div居中效果，我們對div設(shè)置一個div命名為“.div”在html中div標(biāo)簽內(nèi)使用class=“div”,設(shè)置其寬度為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注釋：為了觀察效果設(shè)置寬度?邊框?高度等樣式?*/

DIVCSS5實例

2、div+css居中實例截圖

div實現(xiàn)居中效果截圖

3、div居中代碼應(yīng)用特點

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

4、在線演示：查看案例

5、打包下載：

立即下載 (1KB)

6、居中相關(guān)CSS教程

1)、div居中

2)、css字體居中

3)、div圖片居中

4)、css垂直居中

5)、css背景居中

6)、div內(nèi)容居中

7)、div align center

8)、ie9不能垂直居中

9)、css居中

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

我要分享到：

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

下一篇：DIV滾動條設(shè)置添加 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 優(yōu)化壓縮

·css id(css #)

·css class(css .)

·css ul li列表

·css 圓角圓邊

·css 父級子級

·css 指針概念

·css cursor

·css overflow

·html px em pt網(wǎng)頁單位

·CSS important

·CSS position

·css z-index

·css white-space

·css img圖片

·css class id

·css link與@import區(qū)別

·css 選擇器

·css引入html

必備HTML基礎(chǔ)教程 Essential HTML Tutorials

·html img圖片標(biāo)簽

·html em標(biāo)簽(EM強調(diào)標(biāo)簽)

·html strong加粗(strong標(biāo)簽)

·html B加粗(b加粗標(biāo)簽)

·strong與B加粗區(qū)別

·h1 h2 h3 h4標(biāo)簽(html標(biāo)題標(biāo)簽)

·html A超鏈接錨文本

·html注釋

·html head頭部標(biāo)簽

·html title標(biāo)題標(biāo)簽

·html meta標(biāo)簽

·html link標(biāo)簽

·html i斜體標(biāo)簽

·html u下劃線標(biāo)簽

·html s刪除線標(biāo)簽

·html換行br標(biāo)簽

·html p段落標(biāo)簽

·p標(biāo)簽與br標(biāo)簽區(qū)別

·html div標(biāo)簽元素

·html span標(biāo)簽

·html font標(biāo)簽

·html script標(biāo)簽

·html px em pt網(wǎng)頁單位

·html ul li列表

·ol li列表

·dl dt dd標(biāo)簽組

·table tr td表格

·table tr th表格

·html form表單

·html form input

·html form textarea文本區(qū)域

·html select下拉與跳轉(zhuǎn)(Html select)

·html iframe框架

·html網(wǎng)頁結(jié)構(gòu)

·htm html shtml區(qū)別用法

·網(wǎng)頁編碼charset

·UTF-8 GBK UTF8 GB2312區(qū)別聯(lián)系

·先寫html還是先寫CSS

·顯示擴展名

·html標(biāo)簽大全集合

·html常用標(biāo)簽

·網(wǎng)頁源代碼是什么

如對文章有任何疑問請?zhí)峤坏紻IV CSS論壇，或有任何網(wǎng)頁制作CSS問題立即到CSS論壇發(fā)貼求解 或 直接DIVCSS5網(wǎng)頁頂部搜索遇到DIVCSS疑問。

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

本文www.divcss5.com DIVCSS5版權(quán)所有。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。