居中

上中下三欄佈局:http://www.javashuo.com/article/p-ceyncsea-v.html

1、水平居中

注：這裏說的元素都是子元素，居中也是子元素。

行內元素：父級必須爲塊，子元素爲行內

 #father {
　　　　//　display:block; 若是父級不是塊 得先轉塊
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
  }

塊級元素：寬度定不定兩種

定寬：只需給定寬的子元素設置 margin：0 auto；便可

#father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto; // 加這個
    }　

不定寬：一、設置爲行內  二、定位  三、css3得 transform  四、flexbox佈局

 #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px; // 或者 transform:translateX(-50%)
}

　四、flexbox ( 寬度定不定 均可以)

#father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center; // 水平居中
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }

　　

　

2、垂直居中

行內

單行行內：子元素與父盒子等高；

多行行內：父元素table佈局

    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle; // 垂直居中
    }
 
    #son {
        background-color: green;
    }

　　

塊級元素

一、定高定位

#father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}

　　

二、不定高 css3 transform

#father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
       background-color: green;
        position: absolute;
        top: 50%;
        transform:tanslateY(-50%);
}

 

三、flex box （ 高度定不定 均可以）

#father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;  // 垂直居中
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }

　　3、水平垂直居中

知寬高：定位

一、設置父元素爲相對定位，給子元素設置絕對定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

二、設置父元素爲相對定位，給子元素設置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;

 #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
}

　　

不知寬高：

一、定位

 #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}

　　

 

二、flex

 #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
}
 
    #son {
        background-color: green;
}

　　

 

原文連接：https://blog.csdn.net/weixin_37580235/article/details/82317240