【温故知新】CSS学习笔记（盒子水平居中方法）
CSS盒子水平居中
?
比如有一個DIV盒子，如果不給任何樣式，默認的寬度是和瀏覽器一樣寬的（如下圖所示）。
那么若要讓盒子里面的內容居中對齊，我們可以設定如下樣式：
????????????? div {
???????????????????? text-align: center;
????????????? }
這里的內容包括文字、行內元素、行內塊元素。
盒子本身是可以指定寬度和高度的，我們可以設定如下樣式：
????????????? div {
???????????????????? text-align: center;
???????????????????? width: 300px;
???????????????????? height: 100px;
???????????????????? background-color: deeppink;
????????????? }
這里我們可以發現盒子里面的內容對于盒子而言是居中對齊的，但是盒子本身對于頁面而言卻不是居中對齊的。
接下來就是本節需要介紹的——如何讓盒子水平居中？
可以在樣式中如下進行設置：
????????????? div {
???????????????????? text-align: center; ?
???????????????????? width: 300px;
???????????????????? height: 100px;
???????????????????? background-color: deeppink;
???????????????????? margin: 0 auto; /*上下是0，左右是自動*/
????????????? }
或者
????????????? div {
???????????????????? text-align: center; ?
???????????????????? width: 300px;
???????????????????? height: 100px;
???????????????????? background-color: deeppink;
???????????????????? margin-left: auto;
???????????????????? margin-right: auto;
????????????? }
或者
????????????? div {
???????????????????? text-align: center; ?
???????????????????? width: 300px;
???????????????????? height: 100px;
???????????????????? background-color: deeppink;
???????????????????? margin: auto; ?
????????????? }
?
上述三種方式效果都是一樣的，所以以后我們見到了千萬不要慌張。
總結1：
- 文字水平居中我們用 text-align: center;
- 盒子水平居中我們用 margin: 0 auto;
?
總結2：
可以讓一個盒子實現水平居中，需要滿足以下兩個條件：
- 1、必須是塊級元素；
- 2、盒子必須指定寬度（Width）；
然后就給左右的外邊距都設置為auto，就可以使塊級元素水平居中。
實際工作中常用這種方式進行網頁的布局。
?
【完整樣式代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>盒子水平居中</title><style>div { text-align: center; /*盒子的內容居中對齊*/width: 300px;height: 100px;background-color: deeppink;margin: 0 auto; /*上下是0，左右是自動*/margin-left: auto;margin-right: auto;}</style> </head> <body><div>盒子</div> </body> </html>?
?
總結
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（盒子水平居中方法）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（盒子内边距介
- 下一篇： 【温故知新】CSS学习笔记（外边距合并）