css对齐

水平对齐

行内

1、父元素text-align:center;

块级

1、父元素width:

                 margin:0 auto;

2、父元素text-align:center;

     本元素display:inline-block;

3、父元素display:table;

                margin:0 auto;

4、父元素display:flex;

                 justify-content:center;

垂直对齐

行内

1、父元素height:

                 line-height:

2、父元素display:table;

     本元素display:table-cell;

                vertical-align:middle;

块级

1、父元素display:flex;

                 height:

                 align-items:center;

同时居中

行内

1、父元素height:

                 line-height:

                 text-align:center;

块级

1、父元素display:flex;

                 height:

                 align-items:center;

                 justify-content:center;

2、父元素position:relative;

      本元素position:absolute;

                 top:50%;

                 left:50%;

                 margin:

3、父元素position:relative;

      本元素position:absolute;

                 top:50%;

                 left:50%;

                 transform:translate(-50%,-50%);

4、父元素position:relative;

      本元素position:absolute;

                 top:0;

                 left:0;

                 bottom:0;

                 right:0;

                 margin:auto;

                 

转载于:https://www.cnblogs.com/murenyangqun/p/11089407.html