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定位属性

您的项目需求

粘性定位 sticky

定位小总结