水平居中
文本/行内/行内块
1
2
3parent{
text-align:center;
}单个块级元素
1
2
3
4.son{
margin: 0 auto;
}
/*左右设置margin为auto将会均分剩余空间.上下设置margin设置了auto,其计算值为0.*/多个块级元素
1
2
3
4
5
6#parent{
text-align:center
}
.son{
display: inline-block
}绝对定位实现居中
1
2
3
4
5
6
7
8
9#parent{
position: relative
}
.son{
position: absolute;
left: 50%;/*父元素的50%;*/
transform: translateX(-50%);/*自身的-50%;如果兼容性不好用margin: -XX;*/
/*子绝父相,通过left或right结合margin或translate达到居中.*/
}任意个元素(flex)
1
2
3
4
5
6
7
8#parent{
display: flex;
justify-content: center;
}
.son{
flex:1;
}
垂直居中
单行文本/行内/行内块
1
2
3
4#parent{
height: 100px;
line-height: 100px;
}多行文本/行内/行内块
1
2
3
4#parent{
height: 100px;
line-height: 20px;//高度除以文本的行数
}图片
1
2
3
4
5
6
7
8#parent{
height: 100px;
line-height: 100px;
font-size:0;//清除幽灵空白节点的BUG
}
.son{
vertical-align: middle;
}单个块级元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39//方案一: table-cell
#parent{
display: table-cell;
vertical-align: middle;
//缺点是设置table-cell的元素,宽高设置百分比无效,需要给他的父元素为table才生效.
//设置table-cell不感知margin,设置float或position会对布局造成破坏.
}
//方案二: 绝对定位配合margin或translate
#parent{
position: relative;
}
.son{
position: absolute;
top: 50%;
transform: translateY(-50%);
//或margin-top: -XXX;
}
//方案三: margin: auto 0;
#parent{
position: retive;
height:100px;
}
.son{
height: 50px;
position:absolute;
top: 0;
bottom: 0;
margin: auto 0;
//原理是当top和bottom为0时,margin-top&bottom会无限延伸沾满空间且平分.
}
//方案四: flex
#parent{
display: flex;
align-items: center;
//或为son设置align-self: center;
}任意个元素(flex)
1
2
3
4
5#parent{
display: flex;
align-items: center;
//或为son设置align-self: center;
}水平垂直居中
行内/行内块/图片
1
2
3
4
5#parent{
display: flex;
justify-content: center;
align-items: center;
}Table-cell
1
2
3
4
5
6
7
8#parent{
display: table-cell;
vertical-align: middle;
/*text-align: center;*/ /*如果子元素是行内元素则添加*/
}
.son{
margin: 0 auto;/*如果是块级元素则添加*/
}绝对定位
1
2
3
4
5
6
7
8
9
10#parent{
position: retive;
}
.son{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/*如果考虑兼容性问题的话可以使用margin*/
}绝对居中
1 | #parent{ |
两列布局
左定宽右自适应
- float+margin
1 | .left{ |
- float+overflow
1 | .left{ |
- table的单元格自动分配
1 | #parent{ |
绝对定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17#parent{
position: relative;
}
.left{
width:100px;
height:100px;
position:absolute;
top:0;
left:0;
}
.right{
height:100px;
position:absolute;
top:0;
left:100px;
right:0;
}使用flex实现自适应.
1
2
3
4
5
6
7
8
9
10
11#parent{
display:flex;
}
.left{
width:100px;
height:100px;
}
.right{
height:100px;
flex:1;/*均分父元素剩余空间*/
}使用grid
1
2
3
4#parent{
display: grid;
grid-template-columns: 100px auto;/*auto换成1fr也可以*/
}
一列不定,一列自适应
- 使用float+overflow实现
1 | #parent{ |
- flex实现
1 | #parent{ |
- 使用Grid实现
1 | #parent{ |
三列布局
两列定宽,一列自适应
1 | <div id="parent"> |
- 用float+margin实现
1 | #parent{ |
- float+overflow实现
1 | /*其余样式与以上相同*/ |
- table-cell的单元格自动分配
1 | #parent{ |
- 使用flex实现
1 | #parent{ |
- 使用Grid实现
1 | #parent{ |
####双飞翼布局(两侧定宽,中间自适应)
1 | <div id="parent"> |
1 | #parent{ |
圣杯布局方法
- 定位方式
1 | #parent{ |
- flex方式
1 | #parent{ |
- Grid方式
1 | #parent{ |