CSS經典面試題-水平垂直居中之絕對定位方法

言

對于使用CSS屬性使得元素水平垂直居中問題，基本是在前端面試問題中必問的一個問題。由于這個問題的回答要分好幾種情況，我也會寫幾篇文章分別講述。

今天這篇文章我們首先看看，只有一個元素的時候采用絕對定位如何實現水平垂直居中的。

我已經將代碼放到github上，感興趣的同學可以去看看。

https://github.com/zhouxiongking/article-pages/blob/master/articles/position-center/position-absolute-center.html

CSS

場景

我們假定頁面只有一個div元素，目的是通過CSS屬性控制該div元素的水平垂直居中。

因為這篇文章講述的是絕對定位方法，因此要將div的position設置為absolute。為了讓div的水平垂直居中看起來更形象，我們添加border屬性。

通用屬性

接下來我們看看兩種實現方法吧。

方法1

在方法1中，我們首先需要使用margin: auto;在普通內容流中，margin: auto;相當于margin-top:0;margin-bottom:0。

其次因為div已經被設置為absolute，脫離文檔流，因此可以方便設置left，top，right，bottom四個值。

將left，top，right，bottom四個之都設置為0，瀏覽器會重新分配一個邊界框，這樣整個元素就會填充body所有可用空間。

為了讓元素能呈現水平垂直居中的狀態，必須給div元素設置高度和寬度，添加height和width屬性。

通過以上描述，我們可以得到以下的CSS屬性。

css屬性

通過在頁面上測試，我們可以得到以下的效果。而且不管瀏覽器窗口大小怎么變化，這個div元素始終是水平垂直居中的狀態。

方法1效果圖

方法2

方法2更好理解一些，首先給div設定高度和寬度。

由于position設置為absolute;給div設定left和top屬性都為50%

最后將div的margin-left和margin-top設置為寬度和高度的一半。

通過以上描述，得到以下的CSS代碼。

CSS代碼

通過在頁面上測試，我們可以得到以下效果圖。而且不管瀏覽器窗口大小怎么變化，這個div元素始終是水平垂直居中的狀態。

方法2效果圖

方法優點

上述兩種方法的CSS屬性都未曾使用CSS3特性，因此不用擔心兼容性問題。
兩種方法均只需要這一個類，就可實現在任何內容塊的水平垂直居中。
是否設置padding值對居中效果沒有影響

方法缺點

元素必須設置高度和寬度，不設置的話將不會有任何效果。
由于必須設置高度，相當于定高，因此為了防止內容邊界溢出，一般需要設置overflow屬性。

方法的優點很明顯，效果也很容易達到；但是方法缺點也是很明顯的，因為有很多元素都未必是定高和定寬的。總的來說還是應該看看實際應用場景。

結束語

今天這篇文章只是講解了，使用絕對定位讓元素水平垂直居中。后面會繼續講解其他元素水平垂直居中的情況，敬請期待吧。

什么需要定位?

浮動可以讓多個塊級盒子一行沒有縫隙排列顯示,多用于橫向排列盒子.
定位則可讓盒子自由地在某個盒子內移動或者固定屏幕某個位置,并且可以壓住其他盒子.

定位組成

定位:將盒子定在某一個位置

定位=定位模式+邊偏移

定位模式~>指定一個元素在文檔中的定位方式

div {
        /* 定位模式 值
        static~>靜態定位 (默認方式) 無定位
        relative~>相對定位 
        absolute~>絕對定位 
        fixed~>固定定位 */
        position: static;
    }

邊的偏移~>決定了該元素的最終位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            position: absolute;
            /* 偏移方向:偏移距離 上 下 左 右 */
            top: 100px;
            bottom: 100px;
            left: 100px;
            right: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div>盒子A</div>
</body>

</html>

相對定位 relative

相對定位是元素在移動位置的時候,相當于它原來的位置

特點:

移動位置的時候參照點是自己原來的位置
原來在標準流的位置繼續占有.后面盒子仍然以標準流的方式對于它

實踐效果:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .Lazy {
            position: relative;
            top: 100px;
            left: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Lazy">懶羊羊</div>
    <div>喜羊羊</div>
</body>

</html>

絕對定位 absolute

絕對定位是元素在移動位置的時候,是相對于它祖先的元素來說的

特點:

如果沒有祖先元素/祖先元素沒有定位,則以瀏覽器為準定位(Document文檔)
絕對定位不再占有原先的位置
如果祖先的元素有定位(相對絕對固定),則以最近一級有定位祖先為參考點移動位置

實踐

1.祖先元素無定位以瀏覽器為基礎

效果展示:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .Pleasant {
            float: right;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Pleasant">
        喜羊羊 
        <div class="small-bell">鈴鐺</div>
    </div>

</body>

</html>

2.祖先有定位以上一級為基礎

效果展示

代碼展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sheep {
          position: absolute;
          background-color: sandybrown;
          width: 600px;
          height: 600px;
        }
        .Pleasant {
            position: absolute;
            bottom: 50px;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="sheep">
        
        <div class="Pleasant">
            喜羊羊 
            <div class="small-bell">鈴鐺</div>
        </div>
    </div>

</body>

</html>

子絕父相

子級是絕對定位的話父級要用相對定位

使用原因:

子盒子絕對定位,不會占有位置,可以放到父盒子里面的任何一個地方,不影響其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子內顯示
父盒子布局時,需要占有位置,因此父盒子只能相對定位

總結:父級需要占用位置,則選相對定位.子盒子不需要占位置,則選擇絕對定位

但是不是一成不變 按需求來開發靈活變動

實踐

使用效果

代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        height: 240px;
        padding: 20px 5px;
        border: 1px solid coral;
    }
    .goods {
        position: relative;
        width: 200px;
        height: 200px;
    }
    .goods .hot {
       position: absolute;
       top: -7px;
       right: -10px;
       width: 25px;
    }
</style>
<body>
    <div class="box">
        <div class="goods">
            <img class="hot" src="img/hot.png" alt="">
            <img src="img/thing.png" alt="">
        </div>
    </div>
</body>
</html>

固定定位 fixed

固定定位是元素固定于瀏覽器可視區域的位置

特點

1.以瀏覽器的可視窗口為參照點移動元素(跟父元素沒有任何關系,不隨滾動條滾動)

2.固定定位不再占有原先的位置

大廠使用案例:

實踐

效果展示

代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }
    /* 固定標簽的基本用法 */
    .navigation {
        position: fixed;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
    /* 小技巧 固定在版心右側位置 */
    /* 
    1.讓固定定位的盒子left:50% 走到瀏覽器可視區的一半位置 
    2.讓固定定位的盒子margin-left:版心寬度的一半距離(如此案例 900px寬度 一半450px 為了存在縫隙 可多些距離) 多走版心寬度的一半位置
    就實現讓固定定位的盒子貼著版心右側對齊了
    */
    .tag {
       width: 50px;
       height: 50px;
       background-color: #12a182;
       position: fixed;
       top: 100px;
       left: 50%;
       margin-left: 455px;
    }
</style>
<body>
    <div class="core">
        <div class="navigation"></div>
        <div class="tag">TAG</div>
    </div>
</body>
</html>

?粘性定位 sticky

粘性定位可以被認為是相對定位和固定定位的混合

特點

以瀏覽器的可視窗口為參照點移動元素
占有原先的位置(相對定位的特點)
必須添加top left right bottom 其中一個才有效
跟頁面滾動搭配使用

大廠使用案例:

實踐

使用效果:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }

    /* 固定標簽的基本用法 */
    .navigation {
        position: sticky;
        /* 必須存在一個偏移量 */
        top: 0;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
</style>

<body>
    <div class="core">
        <div class="navigation"></div>
        <span>河邊蘆葦密又繁，秋深露水結成霜。意中之人在何處？就在河水那一方。</span>
        <br>
        <span> 逆著流水去找她，道路險阻又太長。順著流水去找她，仿佛在那水中央。</span>
        <br>
        <span>河邊蘆葦密又繁，清晨露水未曾干。意中之人在何處？就在河岸那一邊。</span>
        <br>
        <span>逆著流水去找她，道路險阻攀登難。順著流水去找她，仿佛就在水中灘。</span>
        <br>
        <span>河邊蘆葦密稠稠，早晨露水未全收。意中之人在何處？就在水邊那一頭。</span>
        <br>
        <span>逆著流水去找她，道路險阻曲難求。順著流水去找她，仿佛就在水中洲。</span>
    </div>
</body>

</html>

定位小總結?

定位模式	是否脫標	移動位置
static(默認)	否	不能使用邊偏移
relative	否(占有位置)	相對于自身位置移動
absolute	是(不占有位置)	帶有定位的父級
fixed	是(不占有位置)	瀏覽器可視區
sticky	否(占有位置)	瀏覽器可視區

定位疊放次序 z-index

在使用定位布局時,可能會出現盒子重疊的情況.

可以使用z-index來控制盒子的前后次序 z軸

數值可為正/負/0(無單位) 默認auto,數值越大,盒子越靠上
如果屬性值相同,則按照書寫順序,后來居上
只有定位盒子才有z-index屬性

實踐

效果展示

代碼展示

無z-index時

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光頭強</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

有z-index時

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
        /* 層級排上 */
        z-index: 1;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光頭強</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

定位拓展

1.絕對定位的盒子居中?

加了絕對定位的盒子不能通過margin:0 auto水平居中,但是通過計算實現水平和垂直居中

left:50% 讓盒子的左側移動到父級元素的中心位置
margin-left:-1/2*元素寬度讓盒子向左移動自身寬度的一半

2.定位特殊特性

行內元素添加絕對或者固定定位,可以直接設置高度和寬度
塊級元素添加絕對或者固定定位,如果不給寬度或者高度,默認大小是內容的大小

3.脫標的盒子不會觸發外邊距塌陷

浮動元素,絕對定位(固定定位) 元素的都不會觸發外邊距合并的問題.

外邊距塌陷:兩個嵌套關系的（父子關系）塊元素，當父元素有上外邊距或者沒有上外邊距（margin-top），子元素也有上外邊距的時候。兩個上外邊距會合成一個上外邊距，以相對較大的上外邊距值為準(下邊距一樣)。左右邊距不會出現這種問題。

4.絕對定位(固定定位)會完全壓住盒子

絕對定位(固定定位)會壓住下面標準流所有的內容[包括文字浮動不會壓住文字]

.昨日回顧

CSS背景屬性

Background-color：背景顏色

Background-image：背景圖片，格式：background-image:url(images/bg.gif);

Background-repeat：背景平鋪，取值：no-repeat、repeat-x、repeat-y、repeat

Background-position：背景定位，格式：background-position:水平方向 垂直方向

單詞表示：left|center|right top|center|bottom 舉例：background-position:center center; //背景圖位于容器的正中間。

百分比表示：50% 50% 舉例：background-position:50% 50%; //背景圖位于容器的正中間

固定值表示：0px 10px 舉例：background-position:0px 10px; //背景圖距容器上邊的距離

CSS浮動和清除

如果要將兩個塊元素放在同一行，這種情況下，就得使用“浮動”屬性。

1、浮動的方向：浮動元素向左或向右浮動；

2、浮動到什么地方為止：碰到包含元素的邊上為止，或者前一個浮動元素的邊上為止；

4、浮動元素的層級：浮動元素的級別要比普通文檔流中的元素的級別高，會發生覆蓋的現象。

5、浮動元素不再占用空間；

6、浮動元素將變成“塊元素”，而不管原來是什么元素；

清除浮動

Clear:清除浮動，取值：left、right(右)、both(兩者)

說明：使用“clear”屬性后，包含元素從“視覺上”能包圍住浮動元素；

使用“clear”屬性之后的其它元素，將恢復默認排版（默認特性）

Clear是清除其之上的元素的浮動特性。

清除屬性放在所有浮動元素的后面，來進行清除浮動。

“盒子”模型

任何HTML元素，都可以看成是一個“盒子”。

一個“盒子”具有：內容寬和高(width、height)、邊框線(border)、內填充(padding)、外邊距(margin)。

提示：同一個class屬性，可以同時設置多個類的名稱，多個類名間用“空格”隔開。

.content{width:500px;}

.float1{float:left;}

.font2{font-size:16px;}

</style>

2.CSS顯示屬性

Display：設置元素的顯示方式，取值：none(隱藏)、block(塊顯示)、inline(行內元素顯示)

3.CSS定位屬性

position：定位的類型，取值：static(靜態定位)、relative(相對定位)、absolute(絕對定位)、fixed(固定)

left：定位元素距離左邊的距離

right：定位元素距離右邊的距離

top：定位元素距離頂邊的距離

bottom：定位元素距離底邊的距離

static：靜態定位，普通文檔流中的元素默認就是static定位；

fixed：固定定位，相對于當前瀏覽器窗口來進行的定位。

固定定位元素不再占用空間(跟浮動很像似)，層級高于普通元素

固定定位元素是一個塊元素，不管原來它是什么元素；

Relative：相對定位，相對于“原來的自己”進行的定位。

它所占的空間依然保留，層級會高于普通元素。

當fixed、relative、absolute三個定位元素，沒有指定“定位坐標”時，它們還停留在原地。

四個坐標值，如果向它原來自己的“中心走”，則都是“正值”，如果向外走(離中心遠)，則都是“負值”。

Absolute：絕對定位，相對于祖先的定位元素(相對定位、絕對定位)進行的定位。它會一直往上走定位元素，如果找到，則相對于其進行位置偏移；如果整個上級都沒有找到定位元素時，則相對于<body>來定位。

所占的空間消失，不占空間，層級高于普通元素；

絕對定位元素是一個塊級框(塊元素)，不管原來是什么元素。

在線咨詢

上一篇：第63節 Form表單-Web前端開發之JavaScript-王唯
下一篇：帶圖標和按鈕切換特效的垂直導航菜單的html頁面源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS經典面試題-水平垂直居中之絕對定位方法

言

場景

方法1

方法2

方法優點

方法缺點

結束語

什么需要定位?

定位組成

相對定位 relative

絕對定位 absolute

子絕父相

固定定位 fixed

?粘性定位 sticky

定位小總結?

定位疊放次序 z-index

定位拓展

.昨日回顧

2.CSS顯示屬性

3.CSS定位屬性

您的項目需求