CSS-实现子盒子水平/垂直居中的方法

CSS-实现子盒子水平/垂直居中的方法

让一个盒子在父元素内水平/垂直居中是一个很常见的问题和需求，也是我们CSS一道很经典且必问的面试题，这里给大家小计了5中方案提供给大家，它们各有优劣仅供参考哦。
1.flex布局：(给盒子本身添加以下三行CSS代码即可)
display: fiex; ;
/* 让盒子在主轴上居中，主轴默认X轴即水平方向 /
justify-content: center;;
/ 让盒子在侧轴上居中（适合子元素为单个时使用），侧轴默认Y轴即垂直方向 */
align-items:center;;

注：2/3/4的方法都需要用到定位的方式——子绝父相
给父元素添加：position: relative;;
给需要居中的元素自身添加:position: absolute;;
2.子级盒子的top和left值都给50%，然后再向left和top移动盒子自身的一半，注意值要写成负数因为往左和往上为负（此方法：前提是需要知道盒子自身的高宽，且若盒子高宽有了变动这个移动的值也会跟着受影响）
3.盒子的top/left/right/bottom/都给0，然后margin: auto;（此方法不需要知道盒子的高宽，且不受盒子高宽影响）
4.子级盒子的top和left仍然给50%，然后使用CSS3属性transform: translate(-50%,-50%);stranslate移动元素，值给(-50%,-50%)表示将盒子往左和往上移动自身的50%大小，这种方式的好处是不需要知道盒子的高宽，且盒子高宽变化之后盒子的双居中位置不会受到影响

第5种方法：这是一种用js的方式实现盒子在父元素内水平垂直双居中显示效果：（这里主要介绍一下思路，毕竟这种方式是几乎不会使用的）
假设父元素是body，高宽是屏幕的高宽，这样我们就需要先获取到屏幕的高宽，然后再获取到盒子的高宽（相当于知道了父盒子的大小）；然后水平居中就是用父盒子的宽减去盒子的宽然后除以2，垂直居中就是用父盒子的高减去盒子的高除以2即可实现水平和垂直居中效果。（PS.获取屏幕的高宽可以直接使用JS的window对象，这样更简单哦）

小结：以上5中方法前4中都是比较常用的，尤其是第1种和第4种，此篇主要提供思路和方法，没有写具体的实现代码，但5种方法小编都亲测有效哦，如您有需要建议亲自敲下代码，毕竟：纸上得来终觉浅，绝知此事要躬行。

PS.当然整理得或许并不全面哈，大家有更好更实用的方法欢迎评论留言，我会再学习补充哦，谢谢！