八十七、CSS水平垂直居中的布局方式
@Author：Runsen
| 2020/11/30、 周一、今天又是奮斗的一天。 |
文章目錄
- 水平居中
- inline-block+ text-algin 屬性配合使用
- 子元素block和margin屬性配合使用
- absolute+transform屬性配合使用 (針對絕對定位）
- display: flex 和justify-content（ 彈性布局）
- 垂直居中
- verticle-align:middle和display: table-cell;
- 絕對定位的解決方法
- display: flex 和justify-content（ 彈性布局）
- 居中布局
水平居中
通過margin: 0 auto; text-align: center實現(xiàn)CSS水平居中。行內(nèi)元素的水平居中：text-align:center;
text-align屬性是針對 內(nèi)聯(lián)元素居中得屬性設(shè)置，對于塊狀元素使用margin:0 auto;來控制水平居中
inline-block+ text-algin 屬性配合使用
水平居中布局的第一種解決方案是對父元素進行text-align: center;，對子元素進行display: inline-block;
<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: 100%;height: 200px;background: #ccc;/* text-align屬性:是為文本內(nèi)容設(shè)置對齊方式* left:左對齊* center:居中對齊* right:右對齊*/text-align: center;}#child {width: 200px;height: 200px;background: #c9394a;/* display屬性:* block:塊級元素* inline:內(nèi)聯(lián)元素(text-align屬性有效)* width和height屬性是無效的* inline-block:行內(nèi)塊級元素(塊級+內(nèi)聯(lián))* width和height屬性是有效的*/display: inline-block;/* text-align: left是對子級元素文本內(nèi)容設(shè)置對齊方式，默認會使用父級元素的center居中對齊*/text-align: left;}</style> </head><body><!-- 定義父級元素父級元素 --><div id="parent"><!-- 定義子級元素 --><div id="child">居中布局</div></div> </body>子元素block和margin屬性配合使用
子元素block和margin屬性配合使用：display: block和margin: 0 auto;
margin:0 auto有時候會失效
最好的辦法就是給子元素設(shè)置：display:block,然后margin:0 auto生效。
margin:0 auto的理解是，上下邊距為0，左右邊距為auto（auto是自動調(diào)整大小）
在瀏覽器中div如果沒有設(shè)置寬度，那么寬度自動為瀏覽器的寬度，這是給div設(shè)置寬度后，div會靠左顯示，margin:0 atuo就是為了填充右側(cè)的空白空間。
margin:0 auto但是對于絕對定位的元素就會失效；因為絕對定位以后就脫離了父級盒子，只能以父級為參考進行定位，你可以理解為絕對定位以后就浮在了父級上面，所以margin中auto就沒有了參考值，如果絕對定位以后還想居中，可以left：50%；margin-left：負的盒子寬度的一半即可
<head><style>#parent {/* 必須設(shè)置width的屬性 */width: 100%;height: 200px;background: #ccc;}#child {width: 200px;height: 200px;background: #c9394a;/* display的值為table和block *//* display: block; div默認是display: block;*//* margin屬性:外邊距* 一個值 - 上右下左* 二個值 - 第一個表示上下，第二個表示左右* auto - 表示根據(jù)瀏覽器自動分配* 三個值 - 第一個表示上，第二個表示左右，第三個表示下* 四個值 - 上右下左*/margin: 0 auto;/* position: absolute; 子元素絕對定位 margin: 0 auto;就會失效*/}</style> </head><body><!-- 定義父級元素 --><div id="parent"><!-- 定義子級元素 --><div id="child">居中布局</div></div> </body>absolute+transform屬性配合使用 (針對絕對定位）
margin:0 auto但是對于絕對定位的元素就會失效，如果絕對定位以后還想居中，可以left：50%；margin-left：負的盒子寬度的一半即可，其實也可以使用transform: translateX(-50%);，就是向左偏移。
<head><style>#parent {width: 100%;height: 200px;background: #ccc;/* 開啟定位 */position: relative;}#child {width: 300px;height: 200px;background: #c9394a;/* 當把當前元素設(shè)置為絕對定位之后:* 如果父級元素沒有開啟定位的話，當前元素是相對于頁面定位的* 如果父級元素開啟了定位的話，當前元素是相對于父級元素定位的*/position: absolute;left: 50%;transform: translateX(-50%);}</style> </head><body><!-- 定義父級元素 --><div id="parent"><!-- 定義子級元素 --><div id="child"></div></div> </body>display: flex 和justify-content（ 彈性布局）
利用彈性布局(flex)，實現(xiàn)水平居中，其中justify-content 用于設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式，本例中設(shè)置子元素水平居中顯示。
<head><style>#parent {width: 100%;height: 200px;background: #ccc;/* 彈性布局 */display: flex;justify-content: center;/* align-items:center; 是實現(xiàn)垂直居中 */}#child {width: 300px;height: 200px;background: #c9394a;}</style> </head><body><!-- 定義父級元素 --><div id="parent"><!-- 定義子級元素 --><div id="child"></div></div> </body>垂直居中
verticle-align:middle和display: table-cell;
通過vertical-align:middle實現(xiàn)CSS垂直居中是最常使用的方法，但是有一點需要格外注意，vertical生效的前提是元素的display：inline-block。
<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: 200px;height: 600px;background: #ccc;/* display屬性:* table:設(shè)置當前元素為<table>元素* table-cell:設(shè)置當前元素為<td>元素(單元格)*/display: table-cell;/* vertical-align屬性:用于設(shè)置文本內(nèi)容的垂直方向?qū)R方式* top:頂部對齊* middle:居中對齊* bottom:底部對齊*/vertical-align: middle;}#child {width: 200px;height: 200px;background: #c9394a;}</style> </head><body><!-- 定義父級元素 --><div id="parent">居中布局<!-- 定義子級元素 --><div id="child"></div></div> </body>絕對定位的解決方法
絕對定位的垂直居中，就是把left變成了top，把translateX變成了translateY
<head><style>#parent {width: 200px;height: 600px;background: #ccc;position: relative;}#child {width: 200px;height: 200px;background: #c9394a;position: absolute;top: 50%;transform: translateY(-50%)}</style> </head><body><!-- 定義父級元素 --><div id="parent"><!-- 定義子級元素 --><div id="child"></div></div> </body>display: flex 和justify-content（ 彈性布局）
display: flex 和justify-content（ 彈性布局）在加上一個align-items:center;就可以實現(xiàn)垂直居中
。
居中布局
居中布局就是將上面的方法合在一起，最常見的就是水平選擇子元素block和margin屬性配合使用，垂直居中選擇verticle-align:middle和display: table-cell;
<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: 1000px;height: 600px;background: #ccc;/* <td> */display: table-cell;vertical-align: middle;}#child {width: 200px;height: 200px;background: #c9394a;/* <table> */display: block;margin: 0 auto;}</style> </head><body><!-- 定義父級元素 --><div id="parent"><!-- 定義子級元素 --><div id="child"></div></div> </body>彈性布局(flex)和絕對定位布局將上面的代碼合并即可。
參考：https://www.imooc.com/learn/1189。一課全面掌握主流CSS布局
總結(jié)
以上是生活随笔為你收集整理的八十七、CSS水平垂直居中的布局方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7系统快捷键失灵怎么办 解决win
- 下一篇： 八十八、CSS两列三列的布局方式