css居中总结

css居中总结

在页面的设计中，经常会需要将某个元素或者模块居中，下面就总结一下这种常见的布局方式。(由于都是居中，就不放图了)

1. 水平居中

1. 使用text-align:center和display:inline-block实现

.parent {
  text-align:center;
}
.child {
  display:inline-block;
}

方便理解的话，可以分为两个步骤，首先使用display:inline-block将元素设置为可被text-align控制的内联块级元素，然后使用text-align属性控制这个元素进行居中。

• 优点：兼容性好
• 缺点：需要同时设置子元素和父元素

需要注意的是：在使用inline-block时，会产生一个缝隙，对布局会造成一些微小的影响，从而影响到页面的美观，这是解决方法

2. 使用margin：0 auto实现

.child{
  width:100px;
  margin:0 auto;
}

很简单的居中方式，不多做解释。

• 优点：兼容性好，简单
• 缺点：只能用于固定宽度的元素。(固定宽度有些欠妥，因为宽度为%的元素也可以使用这个方法居中，但是没有想到什么更好的词)

3. 使用display：table实现

child {
  display:table;
  margin: 0 auto;
}

display:table 这个属性，我没有用过，只知道可以通过这个属性来进行布局。虽然w3c中介绍说display:table可以使得元素就像<table> 元素一样，定义一个块级盒子，但是还是有区别的，首先在语义上就是不一样而定，而且产生的实际效果也是不一样的。

• 优点：只需要对自身设置
• 缺点：兼容性不好，IE6,7需要调整

4. 使用绝对定位实现：

.child {
  position:absolute;
  witdh:20%;
  left:50%;
  margin-left:-10%;
}

使用margin的负值来进行居中，原理是先把元素向右移动父元素的50%，然后使用margin的负值向左移动回来该元素宽度的一半。

• 优点：兼容性好，并且不会对其他元素造成影响，会脱离文档流
• 缺点：需要父元素不是static元素(即元素的position属性值不是static)，并且需要知道元素的宽度。(如果知道元素宽度了直接用margin：0 auto了，谁还会用这个。。)

其实还有一种使用css3的实现方法：

.child {
  position:absolute;
  left:50%;
  transform:translate(-50%);
}

transform属性是用来旋转元素的，但是通过translate()进行的是2D的转换，translate()有两个参数，一个是控制x轴的相对移动，第二个是控制y轴的相对移动，所以当传入-50%的时候，就会向左移动该元素的一半，达到和margin的负值一样的效果，并且不需要知道元素的宽度。

• 优点：不需要知道元素的宽度
• 缺点：需要父元素为非static元素，并且兼容性不太好

除了这些以外，还有一些使用css3标准的实现方法，比如说：

使用flex布局实现

.parent {
  display:flex;
  justify-content:center;
}

Or

.parent {
  display:flex;
}
.child {
  margin:0 auto;
}

这些布局方法不太了解，在此不详细介绍了。但是由于是css3新添加的，所以可想而知，兼容性不会太好。

2. 垂直居中

1. 使用table-cell实现

.parent {
  display:table-cell;
  vertical-align:middle;
}

上述布局会造成子元素相对于父元素垂直居中。

• 优点：子元素和父元素都不需要知道高度

• 缺点：低版本IE不兼容，当文本较多时，会造成文本的溢出，并且不可以通过overflow：hidden隐藏

  因此适用于较少的文字或者文字数量固定的情况

2. 使用绝对布局实现：

.parent {
  position:relative;
}
.child {
  position:absolute;
  top:50%;
  height:100px;
  margin-top:-50px;
}

和使用绝对布局的水平居中的原理相同，都是使用margin的负值。

• 优点：兼容性好
• 缺点：需要父元素是非static的，并且需要知道子元素的高度

类比水平居中，也有一个使用css3中的transform进行居中的方法：

.parent {
  position:relative;
}
.child {
  position:aboslute;
  top:50%;/*百分比参照物是父元素*/
  transform:translate(0,-50%);/*百分比参照物是自身*/
}

• 优点：不需要知道子元素的高度
• 缺点：兼容性不是很好，需要父元素是非static元素

3. 使用flex实现

.parent {
  display:flex;
}
.child {
  margin: auto 0;
}

Or

.parent {
  display:flex;
  aligin-items:center;
}

• 优点：简单
• 缺点：兼容性差

还有一些在子元素前或者后添加元素的方法，感觉这种方法会对界面造成影响，并且违反了语义化规则，想了解的同学可以去看这个

3. 水平垂直居中

基本上就是前面两种的结合

1. 11结合，使用table-cell和inline-block实现

.parent {
  display:table-cell;/*用于垂直居中*/
  vertical-align:middle;
  text-algin-center;/*用于水平居中*/
}
.child {
  display:inline-block;/*用于水平居中*/
}

2. 21结合，使用margin：0 auto和table-cell实现

.parent {
  display:table-cell;
  vertical-align:middle;
}
.child {
  margin0 auto;
}

3. 31结合，使用table-cell和table实现(感觉怪怪的)

总感觉怪怪的，父元素是table-cell而子元素是table，不过经过测试确实可以用。。

.parent {
  display:table-cell;
  vertical-align:middle;
}
.child {
  display:table;
  margin:0 auto;
}

4. 使用绝对布局来实现

.parent {
  position:relative;
}
.child {
  height:200px;
  width;200px;
  position:aboslute;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
}

或者使用transform：translate();和使用margin的负值原理相同。

5. 使用flex实现

.parent {
  display:flex;
  justify-content:center;
  align-items:center;
}

看起来很简洁，不过兼容性不太好

总结：

总结下来的话，实现居中基本上就那几种方法，使用转化为inline-block然后使用text-align；或者display：table或table-cell，然后居中；或者使用绝对布局然后使用margin的负值居中；或者使用css3用flex来布局。以上就是我总结的居中方法，可能不太完善或者有些问题，欢迎指点。

参考资料：利用HTML和CSS实现常见的布局