css居中总结

水平居中

1. inline和inline-*元素水平居中：text-align:center

2. block元素水平居中：

block定宽：margin-left: auto; margin-right; auto;

block不定宽：

a. 转为inline-block元素，使用text-align: center
b. table包裹，设置table的左右margin auto即可

垂直居中

1. 父元素高度不定

(inline,inlie-*,block)垂直居中： 父元素上下内边距相等 padding-top = padding-bottom

2. 父元素高度确定

inline和inline-*竖直居中

单行文本竖直居中： line-height与父元素高度相同

多行文本等其他竖直居中: (模拟td)display：table-cell;vertical-align：middle;

block竖直居中：

a. block定高: position: absolute; top: 50%; margin-top: -height/2
b. block不定高：

<1. (模拟td)display：table-cell;vertical-align：middle;
<2. transform方法：position: releative或者absolute; top: 50%; transform: translateY(-50%)