水平居中
1、第一種方案：
父元素設置：text-align: center;
子元素設置：display: inline-block;
優點：瀏覽器兼容性比較好
缺點：text-align屬性具有繼承性，導致子級元素的文本也是居中顯示的,解決方案在子級元素中增加text-align:lfet;
<div class="parent">
<div class="child">子級元素</div>
</div>
.parent {
width: 100%;
height: 300px;
background: #ccc;
/**
center 居中
left 居左
right 居右
*/
text-align: center;
}
.child {
width: 300px;
height: 300px;
background: rgb(202, 50, 50);
/**
display: block; 塊級元素
display: inline; 內聯元素
display: inline-block; 行內塊級元素
*/
display: inline-block;
text-align: left;
}
2、第二種方案：
優點：只需要設置子級元素進行設置就可以實現水平居中布局的效果
缺點：如果子級元素脫離文檔流，導致margin屬性的值是無效的（將元素設置為浮動float、絕對定位absolute或者固定定位fixed就會脫離文檔流）
<div class="parent">
<div class="child">子級元素</div>
</div>
.parent {
width: 100%;
height: 300px;
background: #ccc;
}
.child {
width: 300px;
height: 300px;
background: red;
/**display: ;
table 和 block 都可以實現水平居中效果
*/
display: table;
/** margin 屬性：外邊距
一個值：上右下左
二個值：上下，左右
auto: 表示瀏覽器自動分配
三個值：上，左右，下
四個值：上右下左
*/
margin: 0 auto;
}
3、第三種解決方案
優點：無論父級元素是否脫離文檔流，都不影響子級元素水平居中效果
缺點：transform屬性是css3中新增的屬性，瀏覽器支持情況不好
.parent {
width: 100%;
height: 300px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
/**
把當前元素設置為絕對定位之后：
- 父級元素沒有開啟定位，當前元素是相對于頁面定位的
- 父級元素開啟定位，當前元素是相對于父級元素的
*/
position: absolute;
left: 50%;
transform: translateX(-50%);
}
垂直居中
1、第一種：table-cell
.parent {
width: 300px;
height: 600px;
background: #ccc;
/**
display屬性：
table: 設置當前元素為<table>元素
table-cell: 設置當前元素為<td></td>元素（單元格）
*/
display: table-cell;
/**
vertical-aligin屬性：用于設置文本內容的垂直方向對齊方式
top: 頂部對齊
middle: 居中對齊
bottom: 底部對齊
*/
vertical-align: middle;
}
.child {
width: 300px;
height: 300px;
background: red;
}
2、第二種：position + transform
.parent {
width: 300px;
height: 600px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3、第三種：行內塊級元素
.parent {
width: 300px;
height: 600px;
background: #ccc;
}
.child {
width: 300px;
height: 300px;
background: red;
}
.parent::after {
content: ' ';
height: 100%;
}
.parent::after, .child {
display: inline-block;
vertical-align: middle;
}
4、第四種：flex
優點：內容塊的寬度任意，可用于更復雜高級的布局技術
缺點：IE8/IE9不支持
.parent {
width: 300px;
height: 600px;
background: #ccc;
display: flex;
align-items: center;
}
.child {
width: 300px;
height: 300px;
background: red;
}
5、第五種：postion + margin-top負高度的一半
.parent {
width: 300px;
height: 600px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
margin-top: -150px; // 負的高度的一半
}
6、第六種：絕對定位 + left、right、bottom、top+margin
.parent {
width: 300px;
height: 600px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
7、第七種：display:grid
.parent {
width: 300px;
height: 600px;
background: #ccc;
display: grid;
}
.child {
width: 300px;
height: 300px;
background: red;
margin: auto;
}
居中部局
1、table+margin 實現水平方向的居中，table-cell + vertical-aligin實現垂直方向居中
.parent {
width: 600px;
height: 600px;
background: #ccc;
display: table-cell;
vertical-align: middle;
}
.child {
width: 300px;
height: 300px;
background: red;
margin: auto;
display: block;
margin: 0 auto;
}
2、absolute + transform
.parent {
width: 600px;
height: 600px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
3、display:grid + margin:auto
.parent {
width: 600px;
height: 600px;
background: #ccc;
display: grid;
}
.child {
width: 300px;
height: 300px;
background: red;
margin: auto;
}
4、flex
.parent {
width: 600px;
height: 600px;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 300px;
height: 300px;
background: red;
}
圣杯布局
- 圣杯布局是來源于該布局效果類似圣杯而得名，簡單來說，就是指三行三列布局。
- 主要是實現中間主體部分中的左右定寬+中間自適應的布局效果。
<div class="parent">
<div class="center">1</div>
<div class="left">2</div>
<div class="right">3</div>
</div>
.parent{
height: 300px;
margin-left: 300px;
margin-right: 300px;
}
.left,
.center,
.right{
height: 300px;
float: left;
}
.left,
.right{
width: 300px;
}
.left{
margin-left: -100%;
position: relative;
left: -300px;
background: chocolate;
}
.center{
background: darkcyan;
width: 100%;
}
.right {
background: darkred;
margin-left: -300px;
position: relative;
right: -300px;
}
雙飛翼布局
- 針對圣杯布局的優化解決方案，主要優化了圣杯布局中開啟定位的問題
<div class="parent">
<div class="center">
<div class="inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
.parent{
height: 300px;
}
.left,
.center,
.right{
height: 300px;
float: left;
}
.left,
.right{
width: 300px;
}
.left{
margin-left: -100%;
background: chocolate;
}
.center{
background: darkcyan;
width: 100%;
}
.right {
background: darkred;
margin-left: -300px;
}
.inner{
height: 300px;
margin: 0 300px;
}
等分布局
<div id="parent-box">
<div id="parent">
<div class="col1"><div class="inner"></div></div>
<div class="col2"><div class="inner"></div></div>
<div class="col3"><div class="inner"></div></div>
<div class="col4"><div class="inner"></div></div>
</div>
</div>
方案一：
#parent-box {
overflow: hidden;
}
#parent {
height: 300px;
margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
width: 25%;
height: 300px;
float: left;
padding-left: 10px;
box-sizing: border-box; /** 盒子模型為border-box */
}
.inner {
height: 300px;
}
.col1 .inner {
background: darkred;
}
.col2 .inner {
background: darksalmon;
}
.col3 .inner {
background: darkslateblue;
}
.col4 .inner {
background: darkviolet;
}
方案二：
#parent-box {
overflow: hidden;
}
#parent {
width: 1400px;
display: table;
margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
height: 300px;
display: table-cell;
box-sizing: border-box;
padding-left: 10px;
}
.inner {
height: 300px;
}
.col1 .inner {
background: darkred;
}
.col2 .inner {
background: darksalmon;
}
.col3 .inner {
background: darkslateblue;
}
.col4 .inner {
background: darkviolet;
}
等高布局
第一種
#parent-box {
display: table;
}
.left,.right {
width: 300px;
display: table-cell;
}
.left {
background: #ccc;
}
.right {
background:#909090;
}
第二種
#parent-box {
overflow: hidden;
}
.left,.right {
width: 300px;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left {
background: #ccc;
}
.right {
background:#909090;
}
css3多列布局
columns
#parent {
/* column-count: 4;
column-width: 300px; */
columns: 4 300px;
column-gap: 1.2rem; // 默認為1rem，用于設置列與列之間的間距，該屬性需要為多列顯示時的元素設置
column-rule: 2px blue solid; // 用于定義列與列之間的邊框，其中包括邊框寬度、顏色、樣式
}
.col1,.col2,.col3,.col4 {
height: 300px;
}
.col1 {
background: darkred;
}
.col2 {
background: darksalmon;
}
.col3 {
background: darkslateblue;
}
.col4 {
background: darkviolet;
}
