2019-10-31 15:55:56
一丶第一種居中方式
- 在css中使用text-align和display屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>第一種居中方式</title> <style> .parent{ background: darkgray; text-align: center; } .child{ width: 200px; height: 200px; background: darkred; display: inline-block; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
- 效果：
text-align的屬性值一般常用的三種：
1.left 左對齊
2.right 右對齊
3.center 居中對齊
這里將其父div設置對齊方式為center，如果不給子級div加display屬性時，子級div並不會居中，居中的將會是子級div的文本和父級div的文本，如果要將子級div居中就需要設置其display:inline-block；
display的屬性值一般常用的三種：
1.inline 內聯 （text-align屬性有效）
2.block 塊級
3.inline-block 內聯+塊級 （text-align屬性有效）
* 當子級div的display設置成inline屬性時，子級div的寬度和高度將會失效，但div可以實現居中效果，只是寬度和高度將無法設置
* 當子級div的display屬性設置成inline-block屬性時，子級div的寬度和高度有效，一般常用這個屬性，如果不給div設置display屬性時，將會默認是block塊級元素
注意：text-align屬性具有繼承性，也就是說當父級設置了這個屬性時，其所有子級(不管多少層子級標簽)的文本內容將會默認是你所設置的對齊方式，看下面代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>第一種居中方式</title> <style> .parent{ background: darkgray; text-align: center; } .child{ width: 200px; height: 200px; background: darkred; display: inline-block; } .test{ width: 150px; background: forestgreen; } </style> </head> <body> <div class="parent"> <div class="child"> <div class="test">這是居中的文本</div> </div> </div> </body> </html>
效果：
這種居中方式的優缺點
優點：瀏覽器兼容性比較好，因為text-align和inline-block這兩個屬性是CSS2支持的，所以在老版本的瀏覽器中同樣可以運行
缺點：text-align屬性具有繼承性，使用它將會導致子標簽的文本也是居中的，如果要解決這個問題就需要在其子標簽中重新設置text-align屬性，但是設置后，該標簽的子標簽同樣會繼承上一級的text-align
二丶第二種居中方式
- 在CSS中使用display和margin屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>第二種居中方式</title> <style> .parent{ background: gray; } .child{ width: 200px; height: 200px; background: indigo; display: table; margin: 0 auto; } </style> </head> <body> <!-- 父級標簽 --> <div class="parent"> <!-- 子級標簽--> <div class="child"></div> </div> </body> </html>
- 效果
margin屬性時外邊距，共有4個屬性值
如果設置一個值：上右下左
如果設置兩個值：上下 - 左右
如果設置三個值：上 - 左右 - 下
如果設置四個值：上 - 右 - 下 - 左
而這里可以不用設置display屬性，同樣也有居中效果，但是設置display屬性時不能設置為inline屬性值，否則居中同樣會失效。
這種居中方式的優缺點
優點：只需對子級標簽進行設置就可以實現居中效果
缺點：如果子級標簽脫離文檔流，將會導致margin屬性值失效
脫離文檔流的幾個屬性：
1.float浮動屬性會導致脫離文檔流
2.position屬性值設置成absolute（絕對定位）
3.position屬性值設置成fixed的（固定定位）
子級標簽設置了這幾個屬性值時，將會脫離文檔流導致margin屬性值失效
三丶第三種居中方式
- 在CSS中使用position和transform屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>第三種居中方式</title> <style> .parent{ width: 500px; height: 200px; position: relative; background: #000; } .child{ background: green; width: 200px; height: 200px; position: absolute; left: 50%; transform: translateX(-50%); } </style> </head> <body> <!-- 父級標簽 --> <div class="parent"> <!-- 子級標簽 --> <div class="child"></div> </div> </body> </html>
- 效果：
在代碼可以看出我並沒有將寬度設置成瀏覽器的寬度
在給子級標簽設置position屬性值為absolute（絕對定位）時
如果父級標簽沒有設置定位的話，當前元素是相對於頁面的
如果父級標簽開啟了定位的話，當前標簽是相對於父級標簽進行定位的
如果我將上面代碼的父級標簽position屬性去掉的話將會是如下效果：
可以看出子級標簽並沒有相對於父級進行定位了
設置了position屬性后才能設置其left屬性（距離左邊標簽的距離），如果不設置position屬性，left屬性將會是無效的
transform屬性表示平移的意思，而translateX表示水平的平移，如果寫上負值將會向左平移，如果寫上的值是以百分比表示，將會平移自身寬度*百分比的距離，所以這里寫上translateX(-50%)表示左平移100px ,我前面設置的是200px寬度
這種布局方式的優缺點：
優點：不論父級標簽是否脫離了文檔流，對子級標簽都不會影響水平居中效果
缺點：transform屬性是CSS3中新增屬性，瀏覽器支持情況不好
四丶對位置進行單獨計算，這種方法效果太差，不好管理，也不利於閱讀。（這個不寫了）
以上就是對div進行的水平居中幾種方式
學習記錄
下篇垂直居中