浅谈css居中对齐

本文只是浅析如何对齐，即看即用

行内元素

行内元素的水平居中：

1,父级加文本对齐：text-align:center;

2,css3中Flex布局，父元素设置属性：dispaly: flex; justify-content:  space-around;

行内元素的垂直居中

1，子元素加一个等于父级的行高line-height;

2，利用vertical-align;。

3，css3中的Flex布局，父元素设置属性：dispaly: flex;align-items: center;

块级元素

块级元素水平居中

1，css3中Flex布局，父元素设置属性：dispaly: flex; justify-content: space-around;

2，利用定位，

a.如果子元素定宽高

父元素加poisition: absolute，子元素设置属性：position: absolute; left: 50%;margin-left: -width/2;

或者父元素加poisition: absolute，子元素设置属性：position: absolute; left: 0;right: 0;margin: 0 auto;

或者父元素加poisition: absolute，子元素设置属性：position: absolute; left: 50%;tranform: translate(-50%,0);

       b.如果父元素不定宽高

父元素加poisition: absolute，子元素设置属性：position: absolute; left: 50%;tranform: translate(-50%,0);

3，利用margin：margin: 0 auto;

块级元素垂直居中

1，css3中的Flex布局，父元素设置属性：dispaly: flex;align-items: center;

2,利用定位

a，如果子元素定高

父元素加poisition: absolute，子元素设置属性：position: absolute; top: 50%;margin-top: -width/2;

或者父元素加poisition: absolute，子元素设置属性：position: absolute; top: 0;bottom: 0;margin: auto 0;

或者父元素加poisition: absolute，子元素设置属性：position: absolute; top: 50%;tranform: translate(0,-50%);

b,如果子元素不定宽高

或者父元素加poisition: absolute，子元素设置属性：position: absolute; top: 50%;tranform: translate(0,-50%);

3，利用表格布局父元素加：display:table-cell;vertical-align:middle;