居中

关于居中的一些方法

1.水平居中：

（1）当子元素为行内元素时，给父元素设置 text-align:center 即可。

（2）当子元素为块级元素时，子元素设置为：

posiition:absolute;
left:50%;
margin-left:宽度的负一半；

说明：left:50%是指子元素的左边距离父元素的左边为父元素的一半，而margin-left:宽度的负一半是指父元素的左边框穿过子元素的竖直平分线，二者结合子元素即处于父元素的水平居中位置

（3）利用 tranform 的 translate 方法，设置如下：

position:absolute;
left:50%;
tranform:tranlate(-50%,0);

说明：tranform的tranlate方法是将div向x,y轴平移（以自身元素），参见上一条

（4）利用margin属性，子元素代码如下

position:absolute;
width:xx;
left:x;
right:x;
margin:0 auto;

说明：当 margin 只有两个参数时，第一个表上下，第二个表左右，此时 left 和 right 的参数一定要相同，

（5）利用 flex 布局，父元素代码如下：

display:flex;
justify-content:center;center;

详细参见flex布局

2.竖直居中：

（1）若子元素为单行文本元素，设置其 line-height 为父元素高度即可。

（2）margin属性，子元素代码如下：

position:absolute;
height:xx;
top:x;
bottom:x;
margin: auto 0;

参见水平第四条

（3）利用tranform方法，

position:absolute;
top:50%;
tranform:tranlate(0,-50%);

参见水平第三条

（4）利用 flex 布局，父元素设置如下：

display:flex;
align-items:center;

**参见flex布局

（5）利用vertical-align,先将父元素设置display:table将子元素设置display:table-cell;vertical:middle;注意这样会将子元素沾满父元素，

最简单的同时实现水平竖直居中的方法（子元素为块级元素）：子元素绝对定位后，将left 和 right 设为相同，将top和bottom设为相同，margin取值为auto即可。