CSS水平居中+垂直居中+水平垂直居中

目錄

水平居中:

行內元素

塊級元素

• 方法一:(分爲寬度定或不定兩種狀況)

• 方法二:使用定位

• 方法三:使用flexbox佈局實現(寬度定不定都行)

垂直居中

• 單行的行內元素

• 多行的行內元素

• 塊級元素

水平垂直居中

已知寬高的元素

未知寬高的元素

• 方法一:使用定位

• 方法二:使用flex佈局實現

水平居中

• 行內元素
  首先看它的父元素是否是塊級元素，若是是，則直接給父元素設置 text-align: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>
 
<div id="father">
    <span id="son">我是行內元素</span>
</div>

效果以下:

塊級元素

方案一：(分寬度定不定兩種狀況)
定寬度 : 須要誰居中，給其設置 margin: 0 auto; （做用：使盒子本身居中）

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

不定寬度: 默認子元素的寬度和父元素同樣，這時須要設置子元素爲 display: inline-block; 或 display: inline; 即將其轉換成行內塊級/行內元素，給父元素設置 text-align: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
 
    #son {
        background-color: green;
        display: inline;
    }
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果：（將#son轉換成行內元素，內容的高度撐起了#son的高度，設置高度無用）

方案二：使用定位屬性

首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的 left:50%，即讓子元素的左上角水平居中；

定寬度：設置絕對子元素的 margin-left: -元素寬度的一半px; 或者設置 transform: translateX(-50%);

<style>
    #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;
}
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

不定寬度： 利用css3新增屬性transform: translateX(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

方案三：使用flexbox佈局實現（寬度定不定均可以）

使用flexbox佈局，只須要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

垂直居中

單行的行內元素

只須要設置單行行內元素的"行高等於盒子的高"便可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        line-height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是單行的行內元素</span>
</div>

效果以下:

多行的行內元素

使用給父元素設置 display:table-cell; 和vertical-align: middle; 屬便可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">
    <span id="son">我是多行的行內元素我是多
    的行內元素我是多行的行內元素我是多行的
   內元素我是多行的行內元素我是多行的行內
   素我是多行的行內元素我是多行的行內元素
   </span>
</div>

效果以下:

塊級元素

方案一：使用定位

首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的top: 50%，即讓子元素的左上角垂直居中；

定高度： 設置絕對子元素的 margin-top: -元素高度的一半px; 或者設置transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

不定高度： 利用css3新增屬性transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

方案二：使用flexbox佈局實現（高度定不定均可以）

使用flexbox佈局，只須要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

水平垂直居中

已知高度和寬度的元素

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

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

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

<style>
    #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;
}
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

未知高度和寬度的元素

方案一：使用定位屬性

設置父元素爲相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

<style>
    #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%);
}
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

方案二：使用flex佈局實現

設置父元素爲flex定位，justify-content: center; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
}
 
    #son {
        background-color: green;
}
</style>
 
<div id="father">
    <div id="son">我是塊級元素</div>
</div>

效果以下:

本文摘自: http://www.javashuo.com/article/p-nfgsqawn-dd.html