css中水平对齐及垂直对齐总结

水平及垂直居中是网页布局中无法绕过的问题，总结如下，供学习和回顾。

水平居中：

　　1.父元素是块元素，子元素是行内元素。

　　对父元素使用text-again:center 来设定行内元素水平居中。

　　2.父元素是块元素，子元素是块元素且宽度已经设定。

　　解法1：给子元素添加margin：0 auto；

　　解法2：当父元素和子元素宽度都已知的情况下，给父元素设定padding-left或padding-rigt，或者给子元素设定margin-left或margin-right，长度为（父元素宽度-子元素宽度）/2，给父元素和子元素设定为box-sizing:border-box;可方便计算，否则得加上父元素和子元素的边框宽度。

　　解法3：子元素相对父元素的决定定位来解决

#parent{
    position:relative;  
}
#child{
    position:absolute;
    left:50%;
    margin-left:-50px; //消除父元素偏离的影响
}   

　　解法4：利用给父元素设置flex

    #par {
            box-sizing: border-box;
            border: solid 2px red;
            height: 200px;
            display: flex;
            flex-direction: row;
            justify-content: center;

垂直居中：设定父元素是块级元素，且高度已经确定

　　1.子元素是行内元素

　　给父元素设定line-height且其高度等于行内元素的高度

　　2.子元素是块级元素，但是其高度没有确定，给父元素设置display属性

#par {
            box-sizing: border-box;
            border: solid 2px red;
            height: 200px;
            width: 400px;
            display: table-cell;
            vertical-align: middle;

　　3.利用flex

   #par {
            box-sizing: border-box;
            border: solid 2px red;
            height: 200px;
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;

　　4.子元素是块级元素且高度已经设定

　　计算父元素的padding-top或padding-bottom，计算方法为(父元素高度-子元素高度)/2

　　计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2

　　5.给父元素和子元素定位

　　

#par {
            box-sizing: border-box;
            border: solid 2px red;
            height: 300px;
            width: 400px;
            position: relative;
        }
        #chi {
            box-sizing: border-box;
            border: solid 2px blue;
            background-color: yellow;
            height: 100px;
            width: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }