什么是布局
- html 頁面的整體結構或骨架
- 布局不是某個技術內容 而是一種設計思想
[ 布局方式 ]
- 水平居中布局
- 垂直居中布局
- 居中布局（ 水平 + 垂直 ）
什么是水平居中布局
水平居中布局 元素相對於頁面/元素相對於父元素水平居中
[ 實現方式 ]
- inline-block + text-align 屬性配合使用
注：[優點] 瀏覽器兼容性比較好 [缺點] text-align 屬性具有繼承性 導致子級元素的文本居中顯示
**解決方法：在子級元素重新設置 text-align 屬性覆蓋掉父級元素的 text-align 屬性 **
<style>
*{
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 200px;
background-color: #00ffff;
/* 方法一： inline-block + text-align 屬性配合使用 為父元素 添加 text-align 屬性 為子元素添加 display 屬性
- text-align 屬性 為文本內容設置對其方式
+ left: 左對齊
+ center: 居中對齊
+ right: 右對齊
*/
text-align: center;
}
.child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* display 屬性:
- block: 塊級元素
- inline: 內聯元素 (text-align 有效)
+ width 和 height 屬性無效
- inline-block: 行內塊元素 (塊級 + 內聯 )
*/
display: inline-block;
}
</style>
<body>
<!-- 居中布局 -->
<!-- 方法一： inline-block + text-align 屬性配合使用 -->
<div class="parent">
<div class="child"></div>
</div>
</body>
- table + margin 屬性配合使用
注：[優點] 只需要對子級元素進行設置就可以實現水平居中 [缺點] 如果子級元素脫離文檔流，導致 margin 屬性失效
解決方法：考慮第一種或第三種解決方案
[ 拓展 ] CSS 中使元素脫離文檔流的方式
- 將元素設置浮動 float
- 將元素設置為絕對定位 position: absolute
- 將元素設置為固定定位 position: fixed
<style>
*{
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 200px;
background-color: #00ffff;
}
.child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* 方法二： gtable + margin 屬性配合使用 */
/* display的值 為 table 或 block */
display: table;
/* margin 屬性： 外邊距
- 一個值： 上下左右
- 兩個值： 上下，左右
+ auto 根據瀏覽器自動分配
- 三個值： 上，左右，下
- 四個值： 上，右，下，左
*/
margin: 0 auto;
}
</style>
- absolute + transform 屬性配合使用
注：[優點] 無論父級元素是否脫離文檔流，不影響子級元素水平居中的效果 [缺點] transform 屬性是 CSS 3 中新增的屬性 瀏覽器支持情況不好
**解決方法：考慮第一種或第二種解決方案 **
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 200px;
background-color: #00ffff;
/* 相對定位 */
position: relative;
}
.child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* 當把當前元素設置為絕對定位以后
- 如果父級元素沒有設置定位，當前元素是相對於頁面定位的
- 如果父級元素設置了定位，當前元素是相對於父級元素定位的
*/
position: absolute;
left: 50%;
/* 水平方向平移 */
transform: translateX(-50%);
/* margin-left: -50%; */
}
</style>
- ... ...
什么是垂直居中布局
垂直居中布局 ：當前元素相對於頁面/父元素垂直方向是居中顯示的
[ 實現方式 ]
- table-cell + vertical-align 屬性配合使用
注：[優點] 瀏覽器的兼容性比較好 [缺點] vertical-align 屬性 具有繼承性 導致子級元素的文本居中顯示
**如果父級元素中包含除子級元素以外的文本內容，此方法不適用 **
<style>
* {
margin: 0;
padding: 0;
}
.parent {
/*方法一： table-cell + vertical-align 屬性配合使用 */
width: 200px;
height: 600px;
background-color: #00ffff;
/* display 屬性：
- table: 設置當前元素為<table>元素
- table-cell：設置當前元素為<td>元素 單元格
- 設置完成以后 作為子級元素的div就相當於單元格中的內容了，設置對齊方式即可
*/
display: table-cell;
/*
vertical-align 屬性: 用於設置文本內容的垂直方向的定對齊方式
- top： 頂部對齊
- middle: 居中對齊
- bottom: 底部對齊
*/
vertical-align: middle;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
- absolute + transform 屬性配合使用
注：[優點] 無論父級元素是否脫離文檔流，不影響子級元素的垂直居中的效果 [缺點] transform 屬性是 CSS 3 中新增的屬性 瀏覽器支持情況不好
**解決方法：考慮第一種解決方案 **
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 600px;
background-color: #00ffff;
position:relative;
}
/* 方法二： absolute + transform 屬性配合使用 */
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
position: absolute;
top: 50%;
/* 垂直方向 */
transform: translateY(-50%);
}
</style>
什么是居中布局
居中布局：（ 水平 + 垂直 ）居中
[ 實現方式 ]
- display:block + margin 屬性實現水平方向居中，table-cell + vertical-align 屬性實現垂直方向居中
注：[優點] 瀏覽器兼容性比較好 [缺點] 父元素與子元素都需要增加代碼
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 1000px;
height: 600px;
background-color: #00ffff;
/* 實現垂直居中 */
/* <td> */
display: table-cell;
vertical-align: middle;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
/* 實現水居中 */
/* <table> */
/* display: table; */
display: block;
margin: 0 auto;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
- absolute + transform 屬性實現水平和垂直方向的居中
注：[優點] 無論父級元素是否脫離文檔流，不影響子級元素的垂直居中的效果，不考慮瀏覽器兼容性，優於第一中方案 [缺點] transform 屬性是 CSS 3 中新增的屬性 瀏覽器支持情況不好同時子父元素都增加了代碼
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 1000px;
height: 600px;
background-color: #00ffff;
/* 相對定位 不脫離文檔流*/
position:relative;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
/* 絕對定位 ———— 子絕父相 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* transform: translateX(-50%);
transform: translateY(-50%); */
}
</style>