实现水平居中的办法

原文

博客原文

大纲

1、margin和width实现水平居中
2、inline-block实现水平居中方法
3、浮动实现水平居中的方法
4、绝对定位实现水平居中
5、CSS3的flex实现水平居中方法
6、CSS3的fit-content实现水平居中方法

通过实例实现水平居中——以分页标签为实例

最初效果

 


  

    
Prev
    
1
    
2
    
3
    
4
    
5
    
Next
  

最初效果

1、margin和width实现水平居中

第一种方法是最古老的实现方案，也是大家最常见的方案，在分页容器上定义一个宽度，然后配合margin的左右值为“auto”实现效果。
优点：实现方法简单易懂，浏览器兼容性强；
缺点：扩展性差，无法自适应未知项情况。

 


  

    
Prev
    
1
    
2
    
3
    
4
    
5
    
Next
  

margin和width实现水平居中

2、inline-block实现水平居中方法

这个方法相对来说也是简单易懂，但使用了inline-block解决了水平居中的问题，却又产生了一个新的问题，就是分页项与分页项由回车符带来的空白间距，那么不知情的同学就会不知道如何解决？（而且这个间距并不是所有浏览器都有），所以需要解决下inline-block带来的间距。
优点：
1. 高度可变
2. 内容溢出会将父元素撑开。
3. 支持跨浏览器，也适应于IE7。
4. 简单易懂，扩展性强；
缺点：
1. 需要一个容器
2. 水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
3. 内容块宽度不能超过容器的100% - 0.25em。
4. 需要额外处理inline-block的浏览器兼容性。

 


  

    
Prev
    
1
    
2
    
3
    
4
    
5
    
Next
  

3、浮动实现水平居中的方法

这种方法实现和前面的与众不同，使用了浮动配合position定位实现。
优点：兼容性强，扩展性强；
缺点：实现原理较复杂。

 


  

    
Prev
    
1
    
2
    
3
    
4
    
5
    
Next
  

4、绝对定位实现水平居中

这种实现我们有一个难题，我并不知道元素的宽度是多少，这样也就存在如方法一所说的难题，但我们可以借助方法三的原理，即相对定位来做一点变通。
优点：扩展性强，兼容性强;
缺点：理解性难。

 


  

    
Prev
    
1
    
2
    
3
    
4
    
5
    
Next
  

5、CSS3的flex实现水平居中方法

CSS3的flex是一个很强大的功能，她能让我们的布局变得更加灵活与方便，唯一的就是目前浏览器的兼容性较差。
display:box是2009年以前的关于flex的用法，是需要加上前缀的
display:flex是之后的用法，也是以后的标准用法
优点：实现便捷，扩展性强
缺点：兼容性差。

 


  

    
Prev
    
1
    
2
    
3
    
4
    
5
    
Next
  

6、CSS3的fit-content实现水平居中方法

“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以让我轻松的实现水平居中的效果：
优点：简单易懂，扩展性强;
缺点：浏览器兼容性差

 


  

    
Prev
    
1
    
2
    
3
    
4
    
5
    
Next
  

参考网站

https://www.w3cplus.com/css/elements-horizontally-center-with-css.html
http://blog.csdn.net/freshlover/article/details/11579669