1.块级元素水平居中。container{height:300px;宽度：300px；border:1pxsolidred;}.content{width:10rem;边框：1px纯绿色；margin:0auto;}Effect:2.内联元素水平居中。container{height:300px;宽度：300px；边框：1px纯红色；text-align:center;}.content{display:inline-block;border:1pxsolidgreen;}效果：代码非常简单，没有兼容性问题，所以通常不需要使用其他复杂的方法来实现水平居中的效果。2.水平垂直居中使用CSS控制垂直居中（或水平垂直居中）不如控制垂直居中方便。下面介绍几种主要类型。1、flex布局flex布局出现后，垂直居中非常方便。直接设置父元素：displayflexalign-itemscenter如果想同时水平居中，同时设置：justify-contentcenter需要注意的是IE10+才支持，webkit前缀浏览器需要添加webkit以设置flex属性。.container{宽度：300px；高度：300px；边框：1px纯红色；显示：-webkit-flex；显示：弹性；//键属性align-items:center;　//verticalcenterjustify-content:center//水平居中}.content{border:1pxsolidgreen;}2.margin+position:absolutelayoutposition:绝对布局元素，通过设置这两对属性top/bottom,left/right，可以让垂直方向和水平方向的元素分别具有自适应特性。就像div在水平方向的默认表现一样！上面对于块级元素的水平居中，我们通过设置width，配合margin来实现水平居中。对于设置了top/bottom、left/right的绝对定位元素，我们可以通过设置width和height以及margin来实现水平和垂直居中：.container{width:300px;高度：300px；位置：相对；border:1pxsolidred;}.content{position:absolute;左：0；右：0；顶部：0；底部：0；宽度：200px；高度：100px；保证金：自动；border:1pxsolidgreen;}效果：兼容性好，IE8及以上支持。3.transform+absoluteabsolute绝对定位元素的left和top属性分别是子元素的左边框和上边框相对于父元素定位；transform是CSS3中一个非常强大的属性，它可以接收多个属性值，包括旋转、缩放、平移等多种功能。这里结合使用两者，首先将子元素的左上固定点定位到父元素的中心点，然后使用transform将子元素的中心点移动到父元素的中心点：.container{宽度：300px；高度：300px；位置：相对；border:1pxsolidred;}.content{position:absolute;左：50%；顶部：50%；转换：翻译（-50%，-50%）；border:1pxsolidgreen;}效果：这个方法有一个小缺陷，就是translate函数的参数，最终计算出来的值不能是小数，否则有些浏览器的渲染效果会很模糊，所以如果你使用这种方法，最好将宽度和高度设置为偶数。4.absolute+margin负值和前面的方法很像。之前的方法是使用transform将元素平移到左上角。该方法使用margin的负值将元素拉到左上角。代码：.container{宽度：300px；高度：300px；位置：相对；border:1pxsolidred;}.content{position:absolute;左：50%；顶部：50%；宽度：200px；高度：100px；-顶部：-50px；左边距：-100px；border:1pxsolidgreen;}效果：5.absolute+calc从上面两个方法可以看出，absolute设置了left和top，然后通过panning或者margin重新定位元素，使其向后定位。如果能直接计算出正确的left和top值，岂不是一下子就到位了？calc函数有这个功能，当然我们需要知道子元素的宽高：.container{width:300px;高度：300px；边框：1px纯红色；文本对齐：居中；位置：相对；}.content{位置：绝对；边框：1px纯绿色；宽度：200px；高度：100px；左：计算（50%-100px）；top:calc(50%-50px);}效果：6.line-height+vertical-alignvertical-align是作用于行内元素的属性。内联元素的特点是它会与其他内联元素或文本显示在同一行，但默认情况下它与父元素“基线对齐”。这里的基线指的是父元素每一行中的一个垂直位置，也就是英文x下边的水平线。通过设置vertical-align为middle，可以使内联元素的中间与父元素的中间对齐（基线+字母x高度的一半）。所以可以利用这一点，将父元素的行高设置为自己的高度，然后让子元素与父元素的中心线对齐，实现垂直居中。代码：.container{宽度：300px；高度：300px；边框：1px纯红色；行高：300px；text-align:center;}.content{display:inline-block;行高：1.5；边框：1px纯绿色；vertical-align:middle;}作用：以上方法的适用条件不同，因此也各有优缺点。下表比较各种方法：方法条件兼容性flexlayoutwithoutIE10+margin+absolute知道子元素的宽高IE8+transform+absolutenone，子元素的宽高应该是偶数IE10+absolute+negativemargin知道子元素的宽高absolute+calc知道子元素的宽高IE9+line-height+vertical-align知道父元素的宽高实现同样的表现往往有很多种不同的方式CSS。一定要有意识地尝试多种写法，避免在熟悉一两种写法时卡壳，才能游刃有余地应对各种情况。本文首发于：http://wintc.top/site/article...，转载请注明出处。