CSS居中方式总结

发表于 | 分类于

一、水平居中

1、行内元素或者display为inline的块级元素，前提是子元素没有float;
对父元素设置：text-align：center;

2、块级元素(已知宽高)：
1)、元素自身设置为 margin:0 auto;
2)、利用绝对定位和margin结合的方式：

1
2
3
4
5
6
7

.elem {
	position: absolute;
	width: 宽度值;
	left: 50%;
	margin-left: -(宽度值/2);
}

3、块级元素(未知宽高)：

1)、将元素放入table单元格中，设置table为 margin:0 auto;

2)、用display属性将元素变成行内元素，然后父元素设置text-align：center;

3)、父元素左浮动，并相对定位，left:50%;子元素设置相对定位和 left:-50%；

(即设置父元素和子元素分别往相反的方向移动50%) 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}

<div class="wrap">
    <div class="wrap-center">Hello world</div>
</div>

4、采用flex布局，日常未用过，不多说；

二、垂直居中
1、行内元素：设置line-height属性或者是通过 vertical-align方式

2、块级元素的垂直居中也与水平居中类似，利用设置margin的方法以及通过绝对定位和margin结合的方式都可以；

三、水平垂直居中
在日常布局使用时，我们比较少单独使用一种居中方式，更多的还是让元素水平垂直居中；

1、对于行内元素，一般采用line-height和text-alian结合的方式实现：

2、对于块级元素，比较常用的一般有三种：
1)、若元素宽高已知，则通过设置绝对定位为50%,然后向相反的方向移动自身一半的宽高；

1
2
3
4
5
6
7
8
9
.elem{
  weight:200px;
  height:400px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-200px;
}

2)、若元素宽高未知，采用css3的transform属性(支持IE9+)，原理和上面一样(宽高已知也可以用)；

1
2
3
4
5
6
.elem{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

3)、利用绝对定位和margin结合的方式：

1
2
3
4
5
6
7
8
9
10
.elem{
  weight:200px;
  height:400px;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

4)、table-cell方法，使元素如表格一样展示：

1
2
3
4
5
.elem{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

5)、flex弹性布局：

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