碼上快樂

相關內容    簡體    繁體

CSS3頁面布局總結-、定位、浮動、7種垂直居中的方法

本文轉載自   查看原文   2022-03-20 19:19   1119    CSS

一、BFC與IFC

1.1、BFC與IFC概要

BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標准流、普通流）是一個文檔在被顯示時最常見的布局形態。一個框在常規流中必須屬於一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生作用。

BFC是W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。

在普通流中的 Box(框) 屬於一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬於這兩者。並且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 里格式化。

1.2、如何產生BFC

當一個HTML元素滿足下面條件的任何一點，都可以產生Block Formatting Context：
a)、float的值不為none

b)、overflow的值不為visible

c)、display的值為table-cell, table-caption, inline-block中的任何一個

d)、position的值不為relative和static

CSS3觸發BFC方式則可以簡單描述為：在元素定位非static,relative的情況下觸發，float也是一種定位方式。

1.3、BFC的作用與特點

a)、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋

如果一個浮動元素后面跟着一個非浮動的元素，那么就會產生一個重疊的現象。常規流（也稱標准流、普通流）是一個文檔在被顯示時最常見的布局形態，當float不為none時，position為absolute、fixed時元素將脫離標准流。

沒有BFC的情況：

示例代碼：

  View Code

運行結果：

此時的div1因為float已經產生了BFC，在div2中添加樣式overflow:hidden讓其產生BFC，代碼如下：

復制代碼 
            #div2{
                width: 300px;
                height: 300px;
                background: lightblue;
                overflow: hidden;
            }
復制代碼

運行結果：

b)、清除元素內部浮動，計算浮動元素的高度

只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就可以了(IE Haslayout)。

當一個元素的內部元素浮動時不會計算其高度，示例如下：

  View Code

運行結果：

修改div0讓其觸發BFC，還原高度，代碼如下：

復制代碼 
            #div0 {
                border: 2px solid lightsalmon;
                padding: 20px;
                width: 400px;
                overflow: hidden;  /*讓div0觸發BFC*/
            }
復制代碼

運行結果：

 

c）、外邊距將不再與上下文之外的元素折疊 

示例代碼：

  View Code

如果此時將腳本的div1與div2同時變成BFC環境，修改的css如下：

復制代碼 
            #div1 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                margin-bottom: 100px;
                overflow: hidden;
            }
            
            #div2 {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin-top: 100px;
                overflow: hidden;
            }
復制代碼

執行時會發現效果還是一樣，此時的div1與div2都是BFC上下文，但是要求的是：外邊距將不再與上下文之外的元素折疊，按照要求，我們應該將div1與div2放在不同的上下文中，修改后的腳本如下：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC與IFC</title>
        <style type="text/css">
            #div1 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                margin-bottom: 100px;
            }
            
            #div2 {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin-top: 100px;
            }
            #div2-outer
            {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <h2>BFC與IFC</h2>
        <div id="div1">div1
        </div>
        <div id="div2-outer">
            <div id="div2">div2
            </div>
        </div>
    </body>
</html>
復制代碼

運行結果如下：

 d)、元素會一個接一個地被垂直放置，它們的起點是一個包含塊的頂部（文字不會環繞布局）

示例代碼：

  View Code

沒有BFC時的運行結果：

從運行結果可以看出div與p還是重疊了，只是文字被擠出，和前面提到的重疊是同一個意思，將p元素觸發BFC后的效果如下圖所示：

            p{
                overflow: hidden;
            }

運行結果：

1.4、IE與Layout

Layout是 IE 瀏覽器渲染引擎的一個組成部分。在 IE 瀏覽器中，一個元素要么自己對自身的內容進行組織和計算大小， 要么依賴於包含塊來計算尺寸和組織內容，hasLayout 與 BFC 有很多相似之處。在IE中，元素使用“布局”概念來控制尺寸和定位，分為擁有布局和沒有布局兩種情況，擁有布局的元素由它控制本身及其子元素的尺寸和定位，而沒有布局的元素則通過父元素（最近的擁有布局的祖先元素）來控制尺寸和定位，而一個元素是否擁有布局則由 hasLayout 屬性告知瀏覽器，它是個布爾型變量，true 代表元素擁有布局，false 代表元素沒有布局。簡而言之，hasLayout 只是一個 IE 下專有的屬性，hasLayout 為 true 的元素瀏覽器會賦予它一系列的效果。
特別注意的是，hasLayout 在 IE 8 及之后的 IE 版本中已經被拋棄，所以在實際開發中只需針對 IE 8 以下的瀏覽器為某些元素觸發 hasLayout。

出發IE下的haslayout方法：

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，僅用於塊級元素)
overflow-x: (除 visible 外任意值，僅用於塊級元素)
overflow-y: (除 visible 外任意值，僅用於塊級元素)
position: fixed

綜合前面的內容清除浮動的寫法如下：

復制代碼 
.floatfix{
*zoom:1;  /*在舊版本的IE瀏覽器縮放大小，觸發haslayout*/
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
復制代碼

除了BFC還有IFC,GFC,FFC,是不同格式化上下文（Formatting Context）的簡稱，GFC是網格格式化上下文（Grid Formatting Context），FFC是彈性盒格式化上下文（Flex Formatting Context），FKC是開封菜的意思:）。

BootStrap的寫法：

復制代碼 
.clearfix { 
  *zoom: 1; 
} 
 
.clearfix:before, 
.clearfix:after { 
  display: table; 
  line-height: 0; 
  content: ""; 
} 
 
.clearfix:after { 
  clear: both; 
}
復制代碼

解釋：

構成Block Formatting Context的方法有下面幾種：
float的值不為none。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block中的任何一個。
position的值不為relative和static。

很明顯，float和position不合適我們的需求。那只能從overflow或者display中選取一個。
因為是應用了.clearfix和.menu的菜單極有可能是多級的，所以overflow: hidden或overflow: auto也不滿足需求
（會把下拉的菜單隱藏掉或者出滾動條），那么只能從display下手。

我們可以將.clearfix的display值設為table-cell, table-caption, inline-block中的任何一個
但是display: inline-block會產生多余空白，所以也排除掉。
剩下的只有table-cell, table-caption，為了保證兼容可以用display: table來使.clearfix形成一個Block Formatting Context
因為display: table會產生一些匿名盒子，這些匿名盒子的其中一個（display值為table-cell）會形成Block Formatting Context。
這樣我們新的.clearfix就會閉合內部元素的浮動。

二、定位

使用css布局position非常重要，他的語法如下：

position：static | relative | absolute | fixed | center | page | sticky
默認值：static，center、page、sticky是CSS3中新增加的值。

2.1、static
可以認為靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

示例：

  View Code

運行結果：

定義偏移並未起作用。

2.2、relative

相對定位，對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相對定位</title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin: 10px;
            }
            #div1 {
                position: relative;  /*相對定位*/
                left:30px;  /*在自己原有位置上相對左邊偏移30像素*/
                bottom: -30px;
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>
</html>
復制代碼

運行結果：

2.3、absolute

絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。

元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>絕對定位</title>
        <style type="text/css">
            div {
                border: 2px solid darkturquoise;
                padding: 10px;
            }
            
            #div1 {
                width: 400px;
                height: 400px;
            }
            
            #div2 {
                width: 300px;
                height: 300px;
            }
            
            #div3 {
                width: 200px;
                height: 200px;
                position: absolute;
                right: 5px;
                top: 5px;
            }
        </style>
    </head>

    <body>
        <div id="div1"> div1
            <div id="div2"> div2
                <div id="div3">div3
                </div>
            </div>
        </div>

    </body>

</html>
復制代碼

運行結果：

 因為div3使用absolute絕對定位，它的參考對象是父元素div2,div1都不滿足條件，因為兩者都沒有進行定位，是默認的定位值static，根據約定最終找到body，所以會出現在頁面的右上角。此時如果想讓div3的參照對象為div1，則可以修改代碼為：

復制代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>絕對定位</title>
        <style type="text/css">
            div {
                border: 2px solid darkturquoise;
                padding: 10px;
            }
            #div1 {
                width: 400px;
                height: 400px;
                position: relative;  /*相對定位*/
            }
            #div2 {
                width: 300px;
                height: 300px;
            }
            #div3 {
                width: 200px;
                height: 200px;
                position: absolute;
                right: 5px;
                bottom: 5px;
            }
        </style>
    </head>
    <body>
        <div id="div1"> div1
            <div id="div2"> div2
                <div id="div3">div3
                </div>
            </div>
        </div>
    </body>
</html>
復制代碼

運行結果：

 

2.4、fixed

固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨着滾動。

簡單的回頂端示例代碼：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style type="text/css">
            body{
                height: 3000px;
            }
            #top{
                width: 50px;
                height: 70px;
                line-height: 70px;
                text-align: center;
                background: lightblue;
                position: fixed;
                right: 1px;
                bottom: 30%;
            }
        </style>
    </head>
    <body>
        <h2 id="title">固定定位</h2>
        <div id="top"><a href="#title">回頂部</a></div>
    </body>
</html>
復制代碼

運行結果：

練習：

center：
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）
page：
與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決於每個absolute模式。（CSS3）
sticky：
對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）

2.5、z-index屬性

語法：z-index: auto | <integer>
默認值：auto
適用於：定位元素。即定義了position為非static的元素
取值：
auto： 元素在當前層疊上下文中的層疊級別是0。元素不會創建新的局部層疊上下文，除非它是根元素。
整數： 用整數值來定義堆疊級別。可以為負值。 說明：
檢索或設置對象的層疊順序。
z-index用於確定元素在當前層疊上下文中的層疊級別，並確定該元素是否創建新的局部層疊上下文。
當多個元素層疊在一起時，數字大者將顯示在上面。

 示例：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                position: absolute;
            }
            #div1 {
                background: lightsalmon;
            }
            #div2 {
                background: lightgreen;
                left: 33px;
                top: 33px;
                z-index: 1;
            }
            #div3{
                background: lightblue;
                left: 66px;
                top: 66px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
        <div id="div3">
            div3
        </div>
    </body>
</html> 
復制代碼

未指定z-index時默認運行效果：

指定div2的z-index值時的運行效果：

2.6、菜單

使用前面的內容實現了一個簡單的下拉菜單，效果如下：

菜單結構：

  View Code

示例代碼：

  View Code

運行結果：

2.7、:target偽類

語法：
E:target { css }
說明：
匹配相關URL指向的E元素。
解釋：URL后面跟錨點#，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)，:target選擇器用於選取當前活動的目標元素。只有支持CSS3的瀏覽器可用。

  View Code

運行結果：

通俗說就是url中的#選中的id元素將被css選擇。在完成沒有js的菜單，選項卡時如果不考慮ie8則可以使用這種新的辦法。

2.8、center定位

center： 與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3） 

2.9、page定位

page： 與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決於每個absolute模式。（CSS3） 

2.10、sticky定位

sticky： 對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）

 

三、浮動

浮動在CSS布局中飽受詬病，因為控制起來比較麻煩，但如果掌握了他的特性使用起來還是不難的，在CSS中使用float指定浮動屬性值，該屬性的值指出了對象是否及如何浮動，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的標准流中，所以文檔的標准流中的塊框表現得就像浮動框不存在一樣。float的基本語法如下：

float：none | left | right

3.1、float取值

none： 設置對象不浮動，默認值

left： 設置對象浮在左邊

right： 設置對象浮在右邊

3.2、float的特性

a)、浮動元素會從標准流中脫離

b)、浮動元素會觸發BFC（塊級元素格式化）、不影響外邊距折疊

c)、 float元素會變成塊標簽

如果float不是none，當display:inline-table時，display的計算值為table；當display:inline | inline-block | run-in | table-* 系時，display的計算值為block，其它情況為指定值。

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #span1{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: right;
            }
        </style>
    </head>
    <body>
        <span id="span1">span1</span>
    </body>
</html>
復制代碼

 不設置float時的效果：

設置向右float時的效果：

span是一個行內標簽，默認設置高寬無效，但浮動后自動變成了塊標簽。

d)、float在絕對定位和display為none時不生效

當display為node時元素會隱藏，所以float意義不大；當position為absolute絕對定位時元素也將從標准流中脫離，元素使用偏移量移動，float特性無效。

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: right;
                position: absolute;
                bottom: 5px;
                left: 5px;
            }
        </style>
    </head>
    <body>
        <div id="div1">span1</div>
    </body>
</html>
復制代碼

e)、浮動元素間會堆疊

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止，浮動元素間的堆疊示例：

  View Code

運行結果：

f)、浮動元素不能溢出包含塊

浮動元素在包含塊內，當包含塊的寬度不足以容下浮動的子元素時，將自動折行；垂直方向當包含塊認為浮動的子元素沒有高度時，子元素會溢出，BFC能解決該問題。水平方向不會溢出，垂直方向有可能會溢出。

  View Code

觸發BFC時：

g)、相鄰的浮動元素，left屬性最前面的元素，排在最左邊

從e就可以看出效果，這里不舉例。

h)、相鄰的浮動元素，right屬性最前面的元素，排在最右邊

排列在最左邊的向右浮動時出現在最右邊，示例如下：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: right;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div id="div1">div1左
        </div>
        <div id="div2">div2中
        </div>
        <div id="div3">div3右
        </div>
    </body>
</html>
復制代碼

運行效果：

i)、包含塊不會計算浮動元素的高寬

示例代碼：

  View Code

運行結果：

j)、浮動元素與非浮動元素會重疊，擠出塊中的內容

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #div1 {
                width: 100px;
                height: 100px;
                background: lightblue;
                float: left;
            }
            #div2 {
                width: 200px;
                height: 200px;
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>

</html>
復制代碼

運行結果：

當div1從float時從標准流中脫離開了，div2在標准流中，可以形象的認為在div2這個隊列前沒有元素了所以div2要向前靠，脫離標准流的元素的z方向排列時比標准流中的元素排列要靠前一些，但div2的內容被div1占用的空間擠出。

3.3、清除浮動

該屬性的值指出了不允許有浮動對象的邊。
clear：none | left | right | both
適用於：塊級元素
取值：
none： 允許兩邊都可以有浮動對象
both： 不允許有浮動對象
left： 不允許左邊有浮動對象
right： 不允許右邊有浮動對象

3.3.1、清除外部浮動

需要注意的是clear是用於控制元素本身的，不能影響別的元素，示例如下：

  View Code

運行結果：

示例中div1的清除浮動並沒有效果，因為他沒有辦法影響div2，如果設置div2清除浮動，則元素本身會向下一行，示例代碼如下：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮動</title>
        <style type="text/css">
            #div1 {
                width: 100px;
                height: 100px;
                background: lightblue;
                float: left;
            }
            #div2 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                float: left;
                clear: both;  /*div2的右邊與左邊都不能出現浮動元素*/
            }
        </style>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </body>

</html>
復制代碼

 運行結果如下：

 

如果div2后面還有一個div3也將會出現前面一樣的情況：

  View Code

 練習：

3.3.2、清除內部浮動

當一個包含塊內部有浮動元素時，外部塊不會計算浮動塊的高度與寬度，為了讓內部的浮動元素撐開包含塊，需要還原高度，暫且稱為清除內部浮動。

方法1：BFC

  View Code

方法2：增加一個空的div，清除浮動

  View Code

運行結果同方法1，要解釋該方法的原理可以參考上文中的第j點。

較為通用且兼容的清除浮動寫法：

復制代碼 
            .clearfix {
                *zoom: 1;/*在舊版本的IE瀏覽器縮放大小，觸發haslayout（類似BFC）*/
            }
            .clearfix:after {  /*偽元素，在應用該元素后添加一個偽元素*/
                content: "";  /*內容為空*/
                display: table;   /*BFC，清除內部浮動*/
                clear: both; /*清除外部浮動*/
            }
復制代碼

四、多種居中辦法

4.1、塊標簽自身水平居中

當一個有寬度的塊標簽設置margin:0 auto時將實現自身的水平居中，示例腳本如下：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #container {
                margin: 0 auto;
                width: 90%;
                background: lightblue;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="container">
        </div>
    </body>
</html>
復制代碼

 運行結果：

4.2、塊標簽內對齊

text-align：start | end | left | right | center | justify | match-parent | justify-all
默認值：start
適用於：塊標簽
left： 內容左對齊。
center： 內容居中對齊。
right： 內容右對齊。
justify： 內容兩端對齊，但對於強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理。（CSS3）
start： 內容對齊開始邊界。（CSS3）
end： 內容對齊結束邊界。（CSS3）
match-parent： 這個值和 inherit 表現一致，只是該值繼承的 start 或 end 關鍵字是針對父母的 <' direction '> 值並計算的，計算值可以是 left 和 right 。（CSS3）
justify-all： 效果等同於 justify，但還會讓最后一行也兩端對齊。（CSS3）

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #container {
                margin: 0 auto;
                width: 90%;
                background: lightblue;
                height: 200px;
                text-align: center;
            }
            #div1{
                width: 100px;
                height: 100px;
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="div1">div1</div>
            Hello Center
        </div>
    </body>
</html> 
復制代碼

運行結果：

這種對齊方式只針對塊標簽內的行內標簽（inline box）與行內塊標簽（inline block）有將，對塊標簽是無效的因為塊標簽默認總是占整行。如果將示例中div1的顯示方式修改為行內塊標簽(display: inline-block;)，則效果如下所示：

 

在布局中經常會需要垂直居中，但沒有像水平居中那么容易，這里總結出5種辦法：

4.3、垂直居中方法一

當一個設置了定位的元素所有的偏移為0且margin為auto時將水平，垂直都居中，且父元素自身的高度可動態變化。

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                height: 100%;
            }
            
            #div0 {
                width: 80%;
                height: 90%;
                border: 3px solid lightblue;
                margin: 0 auto;
                position: relative;
            }
            
            #div1 {
                width: 200px;
                height: 150px;
                background: lightgreen;
                position: absolute;
                /*居中開始*/
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                /*居中結束*/
            }
        </style>
    </head>

    <body>
        <div id="div0">
            <div id="div1">

            </div>
        </div>
    </body>

</html>
復制代碼

運行結果：

個人認為box偏移上下左右都為0，這時候它就不知所措了，只好待在中間。

練習：

完成一個登錄頁面，登錄框居正中，出能出現滾動條

如果有背景圖片，注意兼容不同的分辨率。

4.4、垂直居中方法二

如果是單行文本，行高如塊的高度一樣時將居中，只一行，行高和元素一樣高，居中。

line-height: 600px;
height: 600px;

只可以是文字等一些行內標簽，圖片不行，示例代碼如下：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            #div0 {
                background: lightblue;
                height: 80px;
                /*line-height:40px;*/
                font:20px/80px "microsoft yahei";
            }
        </style>
    </head>
    <body>
        <div id="div0">
            如果是單行文本，行高如塊的高度一樣時將居中，只一行，行高和元素一樣高，居中
        </div>
    </body>

</html>
復制代碼

運行結果：

 

4.5、垂直居中方法三

讓元素相對父元素定位，偏移左50%，上50%，把自身向左移半個寬度，向上移半個高度，同時完成了水平與垂直方向的居中

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            #div0 {
                width: 80%;
                height: 500px;
                background: lightblue;
                position: relative;
                margin: 0 auto;
            }
            
            #div1{
                width: 200px;
                height: 150px;
                background: lightcoral;
                position: absolute;
                left: 50%;
                top:50%;
                margin-top: -75px;
                margin-left: -100px;
            }
        </style>
    </head>
    <body>
        <div id="div0">
            <div id="div1">
            </div>
        </div>
    </body>

</html>
復制代碼

運行效果：

4.6、垂直居中方法四

在CSS有一個屬性應該欺騙過很多開發者，一直認為使用了他就可以垂直居中了，但不行，這個屬性就是：

語法：vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

默認值：baseline

作用：設置或檢索內聯元素在行框內的垂直對其方式
適用於：內聯級與 table-cell 元素
baseline： 把當前盒的基線與父級盒的基線對齊。如果該盒沒有基線，就將底部外邊距的邊界和父級的基線對齊
sub： 把當前盒的基線降低到合適的位置作為父級盒的下標（該值不影響該元素文本的字體大小）
super： 把當前盒的基線提升到合適的位置作為父級盒的上標（該值不影響該元素文本的字體大小）
text-top： 把當前盒的top和父級的內容區的top對齊
text-bottom： 把當前盒的bottom和父級的內容區的bottom對齊
middle： 把當前盒的垂直中心和父級盒的基線加上父級的半x-height對齊
top： 把當前盒的top與行盒的top對齊
bottom： 把當前盒的bottom與行盒的bottom對齊
<percentage>： 把當前盒提升（正值）或者降低（負值）這個距離，百分比相對line-height計算。當值為0%時等同於baseline。
<length>： 把當前盒提升（正值）或者降低（負值）這個距離。當值為0時等同於baseline。（CSS2） 說明：
設置或檢索內聯元素在行框內的垂直對其方式。
對應的腳本特性為verticalAlign。

不能實現對齊的主要原因是：vertical-align這個屬性的特點，它是相對兄弟級行高（line-height）來定位

 

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            #div0 {
                width: 80%;
                height: 500px;
                background: lightblue;
                position: relative;
                margin: 0 auto;
                text-align: center;
            }
            #img1{
                vertical-align: middle;
            }
            #span1{
                line-height: 500px;
            }
        </style>
    </head>
    <body>
        <div id="div0">
            <img src="img/cp.png" id="img1"/><span id="span1"></span>
        </div>
    </body>
</html>
復制代碼

運行效果：

其實此處只設置父元素的行高與高度一樣時也能達到上面的效果，示例代碼如下：

復制代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            #div0 {
                width: 80%;
                height: 500px;
                background: lightblue;
                position: relative;
                margin: 0 auto;
                text-align: center;
                line-height: 500px;
            }
            
            #img1 {
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <div id="div0">
            <img src="img/cp.png" id="img1" />
        </div>
    </body>

</html>
復制代碼

在IE8與Google瀏覽器中運行效果：

使用偽元素

復制代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 800px;
                height: 600px;
                border: 3px solid #0066CC;
                text-align:center;
            }
            #div1:after{
                content: "";
                display: inline;
                line-height: 600px;
            }
            #div1 img {
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <img src="../img/phone.png" />
        </div>
    </body>

</html>
復制代碼

 運行效果：

4.7、垂直居中方法五

4.7.1、使用div構造一個表格

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .divTable {
                display: table;
                width:50%;
            }
            
            .divTr {
                display: table-row;
            }
            .divTd {
                display: table-cell;
            }
            div{
                border:1px solid blue;
            }
        </style>
    </head>

    <body>
        <div class="divTable">
            <div class="divTr">
                <div class="divTd">td11</div>
                <div class="divTd">td12</div>
            </div>
            <div class="divTr">
                <div class="divTd">td21</div>
                <div class="divTd">td22</div>
            </div>
        </div>
    </body>
</html>
復制代碼

運行結果：

4.7.2、使用表格特性居中

示例代碼：

復制代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            body,
            html {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            
            #div0 {
                width: 80%;
                height: 50%;
                background: lightblue;
                margin: 0 auto;
                display: table;  /*類似讓div1為一個table*/
            }
            
            #div1{
                display: table-cell;  /*類似table中的td*/
                vertical-align: middle;   /*垂直居中*/
                text-align: center;  /*水平居中*/
            }
        </style>
    </head>

    <body>
        <div id="div0">
            <div id="div1">
                <img src="img/cp.png" id="img1" height="200" />
            </div>
        </div>
    </body>

</html>
復制代碼

運行結果：

4.8、垂直居中方法六

在某些時候需要將小圖片與文字對齊，可以使用對齊的屬性absmiddle（絕對居中），示例如下：

復制代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                border: 2px solid lightblue;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <img src="img/018080.png" align="absmiddle"/>電視機
        </div>
    </body>
</html>
復制代碼

運行結果：

在IE8與chrome瀏覽器下的效果一樣。

4.9、垂直居中方法七

方法與4.5非常類似，但是4.5要求知道居中元素自身的高度與寬度，這樣會有一定的局限，CSS3中可以使用transform移動元素自身的寬度與高度，示例代碼如下：

復制代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            body,
            html {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            
            #div0 {
                width: 80%;
                height: 70%;
                background: lightblue;
                margin: 0 auto;
                position: relative;
            }
            
            #img1 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform:translate(-50%,-50%);
            }
        </style>
    </head>

    <body>
        <div id="div0">
                <img src="img/cp.png" id="img1"/>
        </div>
    </body>

</html>
復制代碼

運行結果：

transform用於設置或檢索對象的轉換，參數translate()指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0

五、示例下載

https://git.coding.net/zhangguo5/CSS301.git

github:https://github.com/zhangguo5/CSS3_3

https://coding.net/u/zhangguo5/p/HTML5_143/git

六、視頻

 https://www.bilibili.com/video/av16530230/


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS3與頁面布局學習總結（三）——BFC、定位、浮動、7種垂直居中方法 CSS垂直居中的8種方法 CSS垂直居中的8種方法 css3種不知道寬高的情況下水平垂直居中的方法 CSS垂直居中總結 css3常見水平垂直居中的方法 css布局------塊元素水平垂直居中的四種方法 【CSS3】div水平垂直居中 CSS總結div中的內容垂直居中的五種方法 CSS總結div中的內容垂直居中的五種方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM