单列布局
水平居中
父元素text-align:center;子元素：inline-block;
优点：兼容性好；
-
不足：需要同时设置子元素和父元素
水平居中1
子元素margin:0 auto;
-
优点：兼容性好
立即学习“前端免费学习笔记（深入）”；
缺点：需要指定宽度
水平居中1
子元素{display:table;margin:0 auto;}
优点:只需要对自身进行设置
不足:IE6,7需要调整结构
水平居中1
父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半
-
优点：兼容性好
立即学习“前端免费学习笔记（深入）”；
缺点：需要知道子元素的宽度
水平居中1
父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);
优点：兼容性差
缺点：不需要知道子元素的宽度
水平居中1
弹性盒子：父元素：display:flex;justify-content:center;
优点：简单
-
缺点：兼容性差
水平居中1
垂直居中
vertical-align:center;
水平居中1
垂直居中1
父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);
垂直居中1
父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;
父元素：display:flex;align-items:center;
垂直居中1
水平垂直居中
父元素：display:table-cell;vertical-align:middle;text-align:center;
子元素；display:inline-block;
垂直居中1
父元素：position:relative;
子元素：position:absolute
