CSS垂直居中方法

CSS垂直居中方法

创新互联建站是一家集网站建设,双清企业网站建设,双清品牌网站建设,网站定制,双清网站建设报价,网络营销,网络优化,双清网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

w3c指定盒子模型（标准模型）

首先，水平居中很简单：margin: 0 auto

垂直居中：

方法一：使用相对定位和 margin-top 属性对元素进行垂直居中

由于div元素的祖先元素html和body的高度默认是为0的，所以需要设置为100%，并且清除默认样式，即把margin和padding设置为0，如果不清除默认样式的话，浏览器就会出现滚动条。

top属性可以使元素向下偏移。但默认情况下，由于position的值为static（静止的、不可以移动的），元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过top、left等属性改变它的偏移。所以，想要移动元素的位置，就要把position设置为不是static的其他值，如relative,absolute,fixed等。（注意，relative是不会使元素脱离文档流的，absolute和fixed则会！也就是说，relative会占据着移动之前的位置，但是absolute和fixed就不会）。

注：这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。

方法二：使用 transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

注：这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸，因为transform中偏移的百分比就是相对于元素自身的尺寸而言，当被居中的元素是被自己内部元素撑开宽或者高的时候可适用此方法。

方法三：绝对定位结合 margin:auto