CSS 居中

  1. 1. css居中

css居中

记录多种CSS居中方式

  • 文字居中, 设置 line-height = height
1
2
3
4
.parent {
   height: 200px;
   line-height: 200px;
}
  • 绝对定位: 需要提前知道尺寸，margin-top: -(高度的一半); margin-left: -(宽度的一半)
1
2
3
4
5
6
7
8
9
10
11
.parent {
    position: relative;
    height: 200px;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}
  • 绝对定位 + transform: 根据百分比
1
2
3
4
5
6
7
8
9
10
.parent {
    position: relative;
    height: 200px;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
  • 绝对定位 + margin: auto
1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    position: relative;
    height: 200px;
}
.child {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
  • display: flex
    1
    2
    3
    4
    5
    .parent {
        display: flex;
        align-items: center;        /* 垂直居中 */
        justify-content: center;    /* 水平居中 */
    }
CSS