整理下常用的居中方法
1.采用 display:flex 方法
#box1{height: 200px;background: #09c;margin:20px 0;width: 500px;display: flex;justify-content:center;align-items:center;} #content1{width: 100px;height: 100px;background: yellow;}
2.采用 display:table-cell 方法
#box2{height: 200px;background: #09c;margin:20px 0;width: 500px;display:table-cell;vertical-align:middle;text-align: center;} #content2{display: inline-block;width: 100px;height: 100px;background: yellow;}
需要注意的是第二种方法如果子元素为块级标签的话，需要设置其 display：inline-block; ，转为行块级标签
3.采用定位方法
#box3{height: 200px;background: #09c;margin:20px 0;width: 500px;position: relative;} #content3{width: 100px;height: 100px;background: yellow;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
或者
#content3{width:Xpx;height:Ypx;position:absolute;top:50%;left:50%;margin:-Y/2px 0 0 -X\2px;}
如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。
