水平居中

定宽

1.父元素设置text-align:center 子元素设置display:inline-block

2.子元素直接设置margin:0 auto

3.子元素设置left:50% margin-left:-100px

4.父元素设置position:relative 子元素设置position:absolute

不定宽

1.子元素设置left:50% margin-left:-50%

2.使用flex

垂直居中

1.行内块元素

2.父元素设置position:relative 子元素设置position:absolute Ⅰ利用transform:translateY(-50%)

Ⅱ 利用margin

3. flex

垂直水平居中

1.行内块元素

2.父元素position：relative 子元素position：absolute Ⅰ

Ⅱ

Ⅲ

Ⅳ

3.flex

两栏布局

1.两个盒子都开启float+calc

2.float+margin-left

3.absolute+margin-left