BubblyPoker's Blog

css中的居中方案

css居中可谓是老生常谈了,今天来简单地介绍几个我知道的居中方案,其中包含

  1. 水平居中
  2. 垂直居中
  3. 水平垂直居中

css居中可谓是老生常谈了,今天来简单地介绍几个我知道的居中方案

(以下例子中的父元素的class为parent,子元素的class为child)

分类

我将居中问题分为以下几类:

  • 水平居中
    • 宽未知元素
    • 常规文档流元素
      • 行内元素(inline)
      • 块元素(block)
    • 脱离文档流元素
      • 浮动元素(float)
      • 绝对定位元素(absolute)
  • 垂直居中
    • 高未知元素
    • 高已知元素
    • 单行文本元素
  • 水平垂直居中
    • 绝对定位居中方法
    • 负边距方法
    • transform布局方法
    • flex布局方法
    • table-cell布局方法

水平居中

宽未知元素

有两种方法,transformflex方法

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

demo:

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

demo:

常规文档流元素

行内元素(inline)
1
2
3
.parent {
text-align: center;
}

demo:

child

display: inline-block;的元素也可以用此方法水平居中

块元素(block)

此时元素width已知

1
2
3
4
.child {
width: 100px;
margin: 0 auto;
}

demo:

正如上述所说,将child的display设置为inline-block,然后parent的text-align:center也可以实现居中,这里就不写代码了

脱离文档流元素

此时元素width已知

浮动元素(float)
1
2
3
4
5
6
.child {
float: left;
width: 100px;
left: 50%;
margin-left: -50px;
}

demo:

绝对定位元素(absolute)

方法一:只需将上面的float: left换成position: absolute就行,就不写代码了

方法二:

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;
}

demo:

垂直居中

高未知元素

水平居中宽未知元素

有两种方法,transformflex方法

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

demo:

高已知元素

水平居中绝对定位元素(absolute)

方法一:

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

demo:

方法二:

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

demo:

单行文本元素

1
2
3
.child {
}

demo:

将line-height设置与父容器height相同,不过这种方法只适用于单行文本

水平垂直居中

综合上面两种居中,可以得出以下几种方案

绝对定位居中方法

综合水平居中绝对定位元素(absolute)垂直居中高已知元素

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
position: relative;
}
.child {
position: absolute; // fixed也行
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
}

demo:

不仅兼容性很好,而且支持width和height设置成百分比,以及max-和min-(我最喜欢的方案之一)

负边距方法

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

demo:

缺点是不支持设置width和height为百分比,而且也不支持max-和min-属性,不过兼容性还是很好的

transform布局方法

个人最喜欢的方案之一

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

demo:

flex布局方法

css3新增的属性,虽然现在兼容性稍微有问题,但是可以hack解决,毕竟是css布局的大趋势,可以省很多功夫

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

demo:

至于hack方式,可以自行google

table-cell布局方法

这个我很少用,主要是不想看见table这个单词->_->

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;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
}

demo:

需要知道parent的width和height,在parent里不支持width百分比,而且只适用于child是inline和inline-block的元素

以后遇到新的会继续更新…

以上

坚持原创技术分享,您的支持将鼓励我继续创作!