首頁 > web前端 > css教學 > 主體

【CSS】定位元素居中顯示

高洛峰
發布: 2017-02-22 13:47:20
原創
1397 人瀏覽過

1、利用margin


p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;}
登入後複製


分析

  • top: 50%; left: 50%;讓元素的左上在父元素中垂直水平居中

  • margin-top: -50px; margin-left: -50px;讓元素向上向右偏移自身一半的距離

2、利用translate


p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
登入後複製


分析

  • top: 50%; left: 50%;讓元素的左上在父元素中垂直水平居中

  • #transform: translate(-50%, -50%);讓元素向上向右移動自身一半的距離

3、四個方位全部為0,用margin定位


p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right : 0;
    margin: auto;}
登入後複製


#分析

  • 四個方位全部為0時,相互抵消,盒子會在初始位置顯示

  • margin: auto;讓盒子垂直水平居中

更多【CSS 】定位元素居中顯示相關文章請關注PHP中文網!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!