元素居中方法

----水平居中----

行内/内联元素-水平居中

一般加上样式text-align:center

块级元素-水平居中

样式添加

margin: 0 auto

或者

margin-left:auto;
margin-right:auto;

||||垂直居中||||

内联元素-垂直居中

在父级元素添加line-height,大部分line-height的值等于父元素的高度时，元素就垂直居中了。

.box{
    line-height:100px;
}

块级元素-垂直居中

css没有现成的方法可用，但是可以用万能的position样式去实现。注意：需要将这个块级元素父元素设置position:relative

.box{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

-|-|-水平垂直居中-|-|-

1.已知元素宽高-垂直居中

设置其元素的定位，利用css3计算calc,left和top都设置为父元素值的一半，减去自身元素的一半。

.box{
    width:300px;
    height:200px;
    position:absolute;
    z-index:100;
    left:calc(50%-150px);
    top:calc(50%-100px);
}

或者

position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%)

需要将父元素设置为position:relative

2.其父元素未知宽或高-垂直居中

比如宽度不固定,固定在视口底部，且居中。

.box{
    width:80%;
    height:40px;
    position:fixed;
    z-index:100;
    left:0;
    right:0;
    margin:auto;
}