15-2水平居中設置-定寬塊狀元素 · 初識HTML+CSS

當被設置元素為 [塊狀元素](http://www.imooc.com/code/2048 "忘了的小伙伴，讓我們點擊鏈接復習一下吧! ") 時用 text-align：center 就不起作用了，這時也分兩種情況：**定寬**塊狀元素和**不定寬**塊狀元素。這一小節我們先來講一講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width為固定值。) 滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中： html代碼： ~~~ <body> <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div> </body> ~~~ css代碼： ~~~ <style> div{ border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/ width:200px;/*定寬*/ margin:20px auto;/* margin-left 與 margin-right 設置為 auto */ } </style> ~~~ 也可以寫成： ~~~ margin-left:auto; margin-right:auto; ~~~ 注意：元素的“上下 margin” 是可以隨意設置的。 ### 任務我來試試看:這種水平居中的方法兩個2個條件缺一不可，不信？你可以嘗試把右側例子中的 width:200px 刪除，還它是否還可以居中顯示。（記得點擊右上角的全屏按鈕查看效果哦！） ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>定寬塊狀元素水平居中</title> <style> div{ border:1px solid red; width:200px; margin:20px auto; } </style> </head> <body> <div>我是定寬塊狀元素，我要水平居中顯示。</div> </body> </html> ```