css常见居中大集锦

为什么80%的码农都做不了架构师？>>>   

水平居中方法：

方法一：最常见的margin方法

      给元素设置一个显示式的宽度，然后加上margin的左右值为auto，示例：

.center {	
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    }

      若不设置宽度，则直接设置margin的值为 ** auto ,示例：

.center {	
    margin:0 auto;
    }

       0表示设置元素center的上下外边距为0。

        优点：实现方法简单易懂，浏览器兼容性极强；

        缺点：扩展性差，无法自适应未知项状况。

方法二：text-again：center

        这是大家都很熟悉并且经常使用到的文本居中

        优点：方便简洁；

        缺点：只能用于文本。

方法三：使用inline-block 和 text-again 使块级元素居中的方法，示例：

.pagination {
    text-again: center;
    }
.center {	
    display: inline-block;
    zoom: 1;
    }

        使用该方法的关键点在于需要在元素的父级元素中设置text-center属性为center（至于使用inline-block所产生的边距问题，我给大家推荐一篇文章《如何解决inline-block元素的空白间距》，网址是http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements，有兴趣的朋友可以去看看）。

        优点：简单易懂，扩展性强；

        缺点：inline-block的兼容性问题。

方法四：利用浮动的包裹性和相对定位的百分比数据值特性，传说称之为“相对浮动”，示例：

.pagination {
    float: left;
    position: relative;
    left: 50%;
    }
.center {	
    float: left;
    position: relative;
    right: 50%;
    }

        通过给父元素设置浮动float和相对定位在向左移动50%，再给元素设置浮动float和相对定位并让其向右移动50%来实现的水平居中。

        优点：扩展性强，兼容性强；

        缺点：使用了浮动需要清除，并且该方法理解起来比较困难。

方法五：使用绝对定位和负边距居中；示例：

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

        该方法在不知具体宽度时并无法使用，我们可以和方法四结合起来：

.pagination {  
    position: relative;
    }
.pagination ul { 
    position: absolute;
    left: 50%;
    }
.pagination ul li {
    line-height: 25px;
    margin: 0 5px;
    float: left;
    position: relative;/*注意，这里不能是absolute，大家懂的*/
    right: 50%;
    }

        优点：扩展性强，兼容性强；

        缺点：理解起来较为困难。

方法六：CSS3的flex（伸缩盒模型）实现水平居中；示例：

.pagination {  
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;
    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    }

        优点：实现便捷，扩展性强；

        缺点：兼容性差。

方法七：CSS3的fit-content实现水平居中方法；示例：

.pagination ul {  
    width: -moz-fit-content;
    width:-webkit-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    }

        优点：简单易懂，扩展性强；

        缺点：浏览器兼容性差。

方法八：利用table元素实现水平居中；示例：

.table-center {
    margin: 0 auto;
    }

        是使用table作为容器的方法来实现，添加了无意义的标签。table标签本身并不是块级元素，当我们不设置table的宽度的时候，table里面的宽度是由它内部的元素的宽度撑起来的，这样我们就可以通过设置table水平居中从而使它内部的元素居中了。

        优点：简单易懂；

        缺点：增加了无意义的标签。

方法九：通过设计隐藏的div框来使显示的内容居中；示例：

.div-left {
    display:inline-block;
    visibility:hidden;
    width:10%;
    }
.center {
    display:inline-block;
    }
.div-right {
    display:inline-block;
    visibility:hidden;
    width:10%;
    }

        center宽度将自适应，左右两边边距均为div的宽度,因为左右两边div隐藏，所以我们见到的内容将居中对齐；

        优点：简单易懂；

        缺点：局限性太大。

方法十：padding方法；示例：

.center {
    padding: 15px 200px;
    }

        使内容的左右两边有相同的内边距，那么在用户眼中的内容就是居中对齐的。

        优点：简单易懂；

        缺点：使用时需要不断调试距离，比较麻烦。

垂直居中方法：

方法一：行高line-height设置；示例：

.center {
    height: 50px;
    line-height: 50px;
    }

        使用行高line-height设置垂直居中只需要使行高和元素高度一样即可。

        优点：使用方便，简单易懂；

        缺点：元素内内容只能是文本和图片，而且文本和图片不能共存，不然效果差到恶心。

方法二：绝对定位和负边距是元素垂直居中；示例：

.center {
    position: absolute;
    top: 50%;
    height: 高度值;
    margin: -(高度值/2);
    }

        优点：结果简单明了，使用方便；

        缺点：由于固定高度，当文本内容超过限制时，将出现不可预料的情况。

方法三：使用display：table-cell 和 vertical-align 使元素垂直居中；示例：

.center {
    display:table-cell; /*让元素以表格的单元素格形式渲染*/
    vertical-align: middle; /*使用元素的垂直对齐*/
    }

        优点：适用范围广，简单易懂；

        缺点：兼容性问题。

方法四：使用padding让元素内容垂直居中；示例：

.center {
    padding: 30px 10px;
    }

        不给容器固定高度，并在容器上下设置相同的padding值。

        优点：简单易懂，结构清晰，并且兼容所有浏览器；

        缺点：不能给容器固定高度。

转载于:https://my.oschina.net/HaoLuo/blog/261298