【轉】div居中代碼 DIV水平居中顯示CSS代碼

時間  2019-11-19
標籤 div 居中 代碼 水平 顯示 css 欄目 CSS 简体版
原文   原文鏈接

原文地址：http://www.divcss5.com/rumen/r622.shtmlcss

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

須要的主要css代碼有兩個，一個爲text-align:center（內容居中），另一個爲margin:0 auto；其兩個樣式須要配合使用才能實現div盒子的居中顯示排版。瀏覽器

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

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

一、完整html+css代碼htm

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>div居中 在線演示 www.divcss5.com</title> 
  6. <style> 
  7. body{ text-align:center} 
  8. .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} 
  9. /* css註釋：爲了觀察效果設置寬度 邊框 高度等樣式 */ 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="div"> 
  14. DIVCSS5實例 
  15. </div> 
  16. </body> 
  17. </html> 

二、div+css居中實例截圖blog

div css實現居中效果截圖
div實現居中效果截圖utf-8

三、div居中代碼應用特色
此居中方法是讓div居中效果完美兼容各大平臺、兼容各大瀏覽器，不管高版本ie仍是高版本的ie均兼容。get

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程