CSS居中

发表于 分类于

公共html代码

1
2
3
4
5
<div class="parent">
    <div class="child">
        This is child
    </div>
</div>

水平居中

通用-元素宽高未知

transform absolute

1
2
3
4
5
6
7
8
.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

flex

利用 flex 布局的 justify-content 属性，适用于子元素为浮动，绝对定位，内联元素，均可水平居中。

1
2
3
4
.parent {
    display: flex;
    justify-content: center;
}

内联元素

常见的内联元素有：span, a, img, input, label 等等，此方法同样适用于 display: inline-block 的元素。

1
2
3
.element {
    text-align: center;
}

块级元素

常见的块元素：div, h1~h6, table, p, ul, li 等等

设置 margin

此方法只能进行水平的居中，且对 浮动元素 或 绝对定位 元素无效。

1
2
3
4
5
6
7
8
9
.parent {
    width: 100%;
}
.child {
    width: 600px;
    height: 50px;
    margin: 0 auto;
    background: #999;
}

修改为 inline-block 属性

1
2
3
4
5
6
.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

浮动元素

这里注意 relative 不能改为 absolute，因为 relative 是相对于自己原来的位置进行定位

1
2
3
4
5
6
7
.child {
    width: 100px;
    float: left;
    position: relative;
    left: 50%;
    margin-left: -50px;
}

绝对定位元素

left 负margin-left

1
2
3
4
5
6
7
8
9
.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
}

left right margin

1
2
3
4
5
6
7
8
9
10
.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

垂直居中

通用-元素宽高未知

transform absolute

1
2
3
4
5
6
7
8
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

flex

利用 flex 布局的 align-items 属性，适用于子元素为浮动，绝对定位，内联元素，均可垂直居中。

1
2
3
4
.parent {
    display: flex;
    align-items: center;
}

单行文本

利用 line-height = height

1
2
3
4
.text {
    line-height: 200px;
    height: 200px;
}

绝对定位元素

top 负margin-top

1
2
3
4
5
6
7
8
9
.parent {
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

top bottom margin

1
2
3
4
5
6
7
8
9
10
.parent {
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100px;
    margin: auto 0;
}

水平+垂直居中

文本内容

1
2
3
4
5
text {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

Flexbox

1
2
3
4
5
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

absolute 负margin

灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性 ，需要知道子元素的宽高

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    position: relative;
}
.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

transform absolute

  1. 内容可自适应，可以封装为一个公共类，可做弹出层
  2. 可能干扰其他 transform 效果
1
2
3
4
5
6
7
8
9
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

absolute margin:auto

要求居中元素的宽高必须固定

  1. 不仅可以实现在正中间，还可以在正左方，正右方
  2. 元素的宽高支持百分比 % 属性值和 min-/max- 属性
  3. 可以封装为一个公共类，可做弹出层
  4. 浏览器支持性好
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent{
    position: relative;
}
div {
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    //fixed 也可以，适用于没有.parent
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

absolute calc

这种方式也要求居中元素的宽高必须固定，css3带来了计算属性，既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了

1
2
3
4
5
6
7
8
9
10
.parent {
    position: relative;
}
.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

table-cell

适用于子元素 display 为 inline-block, inline 类型的元素，需要已知父元素的宽高，且父元素的宽高不能设为百分比数。

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.child {
    display: inline-block;
    background-color: #03f;
}

grid

兼容性不如flex，不推荐使用

1
2
3
4
5
6
7
.parent {
    display: grid;
}
.child {
    align-self: center;
    justify-self: center;
}

总结

推荐

  • PC端有兼容性要求，宽高固定，推荐absolute + 负margin
  • PC端有兼容要求，宽高不固定，推荐table-cell
  • PC端无兼容性要求，推荐flex
  • 移动端推荐使用flex

比较

水平垂直居中方法 注意事项
flex 通用：不需要知道居中元素的宽高
transform + absolute 通用：不需要知道居中元素的宽高
table-cell 适用于子元素 display 为 inline-block, inline 类型的元素，需要已知父元素的宽高，且父元素的宽高不能设为百分比数。
absolute + margin：auto 要求居中元素的宽高必须固定
absolute + 负margin 需要知道子元素的宽高，宽高不支持百分比尺寸和 min-/max- 属性
absolute + calc 要求居中元素的宽高必须固定，依赖calc的兼容性
grid 兼容性不如flex