css框架对齐,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;

标签：元素,center,50%,height,position,对齐,display,css

来源： https://www.cnblogs.com/murenyangqun/p/11089407.html