CSS垂直居中写法 css水平居中写法
CSS控件居中是前端开发中非常常见的布局技巧。本文列举了CSS控件元素居中的几种方法。说到HTML元素居中，就涉及到水平居中、垂直居中、水平垂直居中。因为HTML文档流是水平的
CSS控件居中是前端开发中非常常见的布局技巧。本文列举了CSS控件元素居中的几种方法。
说到HTML元素居中，就涉及到水平居中、垂直居中、水平垂直居中。因为HTML文档流是水平的，所以水平方向的布局控制比垂直方向简单很多，居中也是。但是写(横)竖居中的方式有很多种，至少一只手多得数不过来。本文列举几个，做个简单的比较。
第一，横向居中
使用CSS控制水平居中很简单:
块级元素 设置width,并设置margin auto内联元素 父元素设置text-align centerHTML代码如下:<div > <div > 水平居中哦 </div></div>
1.块级元素水平居中。
.container { height: 300px; width: 300px; border: 1px solid red;}.content { width: 10rem; border: 1px solid green; margin: 0 auto;}
效果:
2.行内元素水平居中。
.container { height: 300px; width: 300px; border: 1px solid red; text-align: center;}.content { display: inline-block; border: 1px solid green;}
效果:
代码非常简单，不存在兼容性问题，通常不需要使用其他复杂的方式来达到水平居中的效果。
二、横向和纵向中心
用CSS控制垂直居中(或者水平垂直居中)不如控制垂直居中方便。这里有几个。
1.灵活布局
flex布局出现后，方便垂直居中。直接设置父元素:
display flexalign-items center
如果您想同时水平居中，请设置:
justify-content center
注意IE10+只支持。webkit前缀浏览器需要添加webkit来设置flex属性。
.container { width: 300px; height: 300px; border: 1px solid red; display: -webkit-flex; display: flex; // 关键属性 align-items: center; // 垂直居中 justify-content: center // 水平居中}.content { border: 1px solid green;}
2.边距+位置:绝对布局
位置:绝对布局的元素可以通过设置两对属性Top/top/bottom，left/right，在垂直和水平方向上具有自适应的特性。就像div在水平方向的默认表现一样！
在本文中，对于块级元素的水平居中，我们设置宽度，然后配合margin实现水平居中。对于设置了顶部/底部和左侧/右侧的绝对定位元素，我们可以通过设置宽度和高度以及边距来实现水平和垂直居中:
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 100px; margin: auto; border: 1px solid green;}
效果:
兼容性好，IE8及以上支持。
3.变换+绝对
绝对定位元素的left和top属性是相对于父元素定位子元素的左边界和上界；Transform是CSS3中一个非常强大的属性，可以接收多个属性值，包括旋转、缩放、平移等功能。这里，在两者的配合下，首先将子元素的左上不动点定位到父元素的中心，然后使用transform将子元素的中心移动到父元素的中心:
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid green;}
效果:
这种方法有一个小缺陷，就是translate函数的参数，最后计算出来的值不能是小数，否则部分浏览器的渲染效果会模糊，所以使用这种方法时最好将宽度和高度设置为偶数。
4.绝对值+差值负值
与前面的方法类似，前面的方法使用transform将元素移动到左上角，而这个方法使用margin的负值将元素拉到左上角。
代码:
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 50%; top: 50%; width: 200px; height: 100px; margin-top: -50px; margin-left: -100px; border: 1px solid green;}
效果:
5.绝对+计算
从上面的两个方法中可以看出，absolute设置左侧和顶部，然后通过平移或边距将元素重新定位。如果能直接算出正确的左顶值，岂不是一下子就到位了？Calc函数有这个功能。当然，我们需要知道子元素的宽度和高度:
.container { width: 300px; height: 300px; border: 1px solid red; text-align: center; position: relative;}.content { position: absolute; border: 1px solid green; width: 200px; height: 100px; left: calc(50% - 100px); top: calc(50% - 50px);}
效果:
6.行高+垂直对齐
Vertical-align是一个作用于行内元素的属性。内联元素的属性与其他内联元素或文本显示在同一行，但默认情况下，它们与父元素“基线对齐”。这里的基线是指父元素每一行中的一个垂直位置，是英文X的下边缘所在的层次。通过将vertical-align设置为middle，行内元素的中间可以与父元素的中间对齐(基线+字母X高度的一半)。所以我们可以利用这一点，将父元素的行高设置为自己的高度，然后将子元素与父元素的中心线对齐，实现垂直居中。
代码:
.container { width: 300px; height: 300px; border: 1px solid red; line-height: 300px; text-align: center;}.content { display: inline-block; line-height: 1.5; border: 1px solid green; vertical-align: middle;}
效果:
以上方法的适用条件不同，所以也有不同的优缺点。下表对它们进行了比较:
方法兼容性flex布局没有IE10+margin+absolute知道子元素的宽度和高度IE8+transform+absolute，子元素的宽度和高度应该是偶数IE10+absolute+margin负知道子元素的宽度和高度absolute+calc知道子元素的宽度和高度IE9+line-height+vertical-align知道父元素的宽度和高度。
在CSS中实现同样的表现效果往往会有很多不同的方式，所以要刻意尝试很多方式来编写，避免熟悉一两种方式就止步不前，从而在各种情况下得心应手。
