常用的居中方法

整理下常用的居中方法

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 -X2px;}

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。