慕课手记----HTML+CSS单列布局--水平居中，垂直居中，水平垂直居中

一、水平居中

子元素在父元素中水平居中

1.使用 text-align和inline-block 实现

.parent{
        text-align:center;
       }
.child{
        display:inline-block;
       }

2.使用margin:0 auto来实现

.child{
       width:720px;  /*某具体值或百分比*/
       margin:0 auto;  /*左右边距必须为auto*/
       }

3.使用table实现

.child{
       display:table;
       margin:0 auto;
}              

缺点：IE6,7需要调整结构

4.使用绝对定位实现

.parent{
        position:relative;
        }
.child{
       position:absolute;
       left:50%;
       transform:translate(-50%);
       }

缺点：兼容性差,IE9及以上可用

5.使用flex布局实现
1）.

.parent{
        display:flex;
        justify-content:center;
        }

2）.

.parent{
        display:flex;
        }
.child{
       margin:0 auto;
       }

缺点：兼容性差，如果进行大面积的布局可能会影响效率

二、垂直居中

1.使用vertical-align实现
1).

.parent{
        display:table-cell;
        vertical-align:middle;
        height:200px;
        }

2).

.parent{
        line-height: 200px;
}
.child{
        display:inline-block;
        vertical-align:middle;
        }

• 元素属于inline或inline-block或table-cell，vertical-align才会起作用
• 在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell

2.使用绝对定位实现

.parent{
        position:relative;
        }

.child{
       position:absolute;
       top:50%;
       transform:translate(0,-50%);
       }

3.使用flex实现

.parent{
        display:flex;
        align-items:center;
        }

三、水平垂直全部居中

1.利用vertical-align,text-align,inline-block实现

.parent{
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        }

.child{
       display:inline-block;
       }

2.使用绝对定位实现

.parent{
        position:relative;
        }

.child{
       position:absolute;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%);
       }

3.使用flex实现

.parent{
        display:flex;
        justify-content:center;
        align-items:center;
        }