元素居中问题

水平垂直居中

vertical-align:middle;

• 原理：只有display:inline-block;并且与同级元素进行定位参照；矮的去找高的对齐，两个元素都得是inline-block
• 三个条件
  • 给父元素text-align: center;
  • 给当前元素display:inline-block,vertical-align:middle
  • 在当前元素后面（没有回车）加上同级元素span

/*同级元素*/
{
    vertical-align: middle;
    width: 0;
    height: 100%;
    display: inline-block;
}
/*需要垂直居中的元素*/
{
    vertical-align: middle;
    display: inline-block;
}

水平居中是父元素控制子元素：text-align:center

让一个元素始终在窗口水平、垂直居中

/*法一*/
div {
    width: 300px;
    height: 300px;
    position: absolute;/*需要脱离文档流的定位*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;/*这行起作用*/
}
/*法二*/
div {
    position: fixed;
    width: 300px;
    height:300px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
}
/*在没有宽度的时候*/
div {/*水平居中*/
    left: 100px;
    right: 100px;
    top: 0;
    bottom: 0;
}