元素的居中操作

1.块元素的水平居中

方案1：利用margin:0 auto

原理：margin会平分剩余空间，可以理解为父元素的宽度-自身的宽度，这个就是剩余空间。

注意: 使用margin居中只能水平不可以垂直 (自己的理解：因为块元素独占一行所以浏览器认为在这一行内没有剩余空间了不知道对不对)

只对块元素生效，元素是内联(inline)或者有浮动(float)和定位效果(absolute/fixed)则会失效

居中是在父元素内居中

父元素要有足够的空间

{
    margin： 0 auto；
    width：200px；
    height：200px；
    background：pink；
}

2.块元素的水平垂直居中

方案一：绝对定位实现水平居中

{
    width：200px；
    height：200px；
    background：pink；
    position：absolute；
    top:50%;//挪动到当前参考物宽度中心点的右侧
    left：50%;//挪动到当前参考物高度中心点的下侧
    /*transform: translate(-50%,-50%); transfrom属性中的 translate可以使元素平移 -50%也就是自身大小的一半 负值是往相反的方向走*/
    transform:translateX(-50%) translateY(-50%);
}

方案二：原理同上只不过用的是margin减去自身一半的大小

#wrap{
    width：400px；
    height：400px；
    background：yellow；
    position：relative；
}
{
    width：200px；
    height：200px；
    background：pink；
    position：absolute；
    top:50%;
    left：50%;
    margin-left：-100px；/*自身宽高度的一半*/
    margin-top：-100px
}

方案三：加定位后，使其四个方向为0，最后margin：auto

原理:1.块元素如果不设置大小,加absolute定位后,设置 top:0;left:0;bottom:0;right:0;块元素会被拉长铺满整个屏幕,相当于width自适应和父元素一样高,height也被拉长和视口高度一样。(后面这句话是自己理解)

2.本文开头我写了margin;auto实现原理实际就是自动计算剩余空间。当块元素有大小,加定位属性后设置四个方向为0,相当于四个方向都去拽着块元素(如果四个方向都有只会以left和top为主)。

3.但是元素自身有大小，所以不会被拽的铺满整个屏幕。而margin：auto水平方向居中已经验证了，至于为什么垂直也行？可以理解为：此时height被top 和 bottom拉着，有剩余空间所以自动居中。

#wrap{
    width：400px；
    height：400px；
    background：yellow；
    position：relative；
}
#box{
    width：200px；
    height：200px；
    background：pink；
    position：absolute；
    top：0；
    left：0；
    bottom：0；
    right：0；
    margin：auto；
}

方案四：flex方法

原理：给父元素加flex属性使其变为弹性盒 justify-content：center；主轴居中 align-items：center；交叉轴居中。

#wrap{
    width：400px；
    height：400px；
    background：yellow；
    display：flex；
    justify-content：center；
    align-items：center；
}
#box{
    width：200px；
    height：200px；
    background：pink；
}

方案五：flex+margin

原理：如果盒子变为弹性盒相当于margin垂直方向上有剩余空间

#wrap{
    width：400px；
    height：400px；
    background：yellow；
    display：flex；
}
#box{
    width：200px；
    height：200px；
    background：pink；
    margin：auto；
}

3.行内元素的水平垂直居中

原理：text-align:使文本水平居中

line-height:元素自身高度使文本垂直居中

#wrap{
    width：400px；
    height：400px；
    background：yellow；
    text-align：center；
    line-height：400px；
}
<div id="wrap">内容</div>

4.行内块元素水平垂直居中

原理：让块元素变为行内块元素。也就是相当于把box变为“内容”，此时我们进行行内元素水平垂直居中会发现没有居中

这是因为line-height：自身大小, 让自己的基线居中了。(还记得基线不了英文书写是四线三格想不起来搜下基线)而孩子的 vertical-align：默认值是元素放在父元素的基线上

所以添加 vertical-align：middle；让基线到孩子自身的中间但此时还有问题孩子到父亲上下边距都有一点距离(下边距看的不明显) 原因是：字与字直接有缝隙那么如何避免这种缝隙呢？ font-size：0 你把字的大小设置为0，字都没了别说缝隙了。有小伙伴可能此时有点迷那盒子不会消失么？盒子又不是字盒子相当于"内容" 只是一种比喻。

#wrap{
    width：400px；
    height：400px；
    background：yellow；
    text-align：center；
    line-height：400px；
    font-size：0；
}
#box{
    width：200px；
    height：200px；
    background：pink；
    display：inline-block；
    vertical-align：middle；
}

元素居中的简单方法