我要评论垂直居中
通用布局方式(内敛元素和块状元素都适用)
-
利用flex:
核心代码:1
2
3
4
5.container{
display:flex;
flex-direction:column;
justify:center
} -
利用transformx(-50%):
核心代码:1
2
3
4
5
6
7
8
9
10
11
12.container{
width: 300px;
height: 300px;
background: red;
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translatey(-50%);
-webkit-transform: translatey(-50%);
}
内敛元素的垂直居中
单行内敛元素:设置内敛元素的高度和行高相等
核心代码:
1 |
.container {
|
块状元素
-
固定元素高度的块状元素
核心代码1
2
3
4
5
6
7
8
9.container{
position: relative;
}
.child{
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
} -
未知高度的块状元素
当垂直居中的元素的高度和宽度未知时，我们可以借助css3中的transform属性向y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
核心代码:1
2
3
4
5
6
7
8.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translatey(-50%);
}
水平居中
通用布局方式
-
flex布局
核心代码：1
2
3
4.container{
display: flex;
justify-content: center;
} -
absoulte+transform
核心代码:1
2
3
4
5
6
7
8.container{
position:relative;
}
.child{
position: absolute;
left: 50%;
transform: translatex(-50%);
}
内敛元素水平居中
- text-align:center
核心代码:1
2
3.container{
text-align:center
}
块状元素水平居中
-
使用 margin:0 auto 必须注明子元素和父元素的宽度
核心代码:1
2
3.container{
margin:0 auto
} -
多块状元素：
利用内敛元素布局方式container属性为text-align:center;
核心代码:1
2
3
4
5
6.container{
text-align: center;
}
.child{
display: inline-block;
}
水平垂直居中
固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半，使元素水平垂直居中。
核心代码:
1 |
.container {
|
未知宽高元素水平垂直居中
-
利用2d变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
核心代码：1
2
3
4
5
6
7
8
9.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} -
利用flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
核心代码：1
2
3
4
5.container {
display: flex;
justify-content: center;
align-items: center;
}
相对于 body 的水平垂直居中
-
列表布局(兼容性好)
核心代码:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
} -
position 布局
核心代码1
2
3
4
5
6
7
8.container{
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
网友评论