整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS 中几种最常用的水平垂直居中的方法

SS 是前端里面的基础之一,也是非常重要的一部分,它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中,总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。


一、使用 margin:auto

当元素有给定的高度以及宽度的时候,使用 margin: auto; 元素仅会水平居中,并不会进行垂直居中。此时就需要设置元素的 position 为 absolute,父级元素的 position 为 relative,同时元素的上下左右都需要设置为 0。

HTML 代码

<div class="box">
  <div class="center1"></div>
</div>

CSS 代码

.box{
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
  margin-top: 20px;
}
.center1{
  width: 50px;
  height: 50px;
  background-color: #00ACED;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

效果展示:



二、使用 position:absolute

当已经知道了要进行水平垂直居中的元素的宽高时,就可以通过设置 position: absolute 来实现。但是,使用的同时还需要结合其他属性才完整实现。因为,单是设置 absolute,上左距离均为一半,就会出现下面这种情况。很显然可以看到,元素并不是完全居中,仅只有左上角的位置在中心点

概念图:

因此想要实现元素完全水平垂直居中,在设置了 absolute 定位后,可以设置 margin 值为负,或者使用 calc 来计算,上左距离在 50% 的基础上还要减去元素本身一半的宽高。

margin 值为负或者 calc 计算均是在已知元素宽高的情况下,假设不知道元素的宽高,那么怎么实现水平垂直居中呢?这里就可以使用 transform 属性,通过坐标位移来实现居中。

CSS 代码

/* 结合 margin */
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/* 结合 calc 计算*/
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: calc(50% - 25px)
  top: calc(50% - 25px);
}
/* 结合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

效果展示



03

PART

三、使用弹性布局

可以通过弹性布局来设置水平垂直居中,这里需要设置父级元素 display:flex; 还需要设置两个属性,水平布局 justify-content 以及垂直布局 align-items。

HTML代码

<div class="box2">
  <div class="center4"></div>
</div>

CSS代码:

.box2{
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center4{
  width: 50px;
  height: 50px;
  background-color: #B39873;
}

效果展示:


四、文本水平对齐和行高

前面介绍的是元素如何实现水平垂直居中,下面介绍的是如何将文字进行水平垂直居中。这第一个方法也是最经常用的,使用文本水平对齐 text-align 和行高 line-height 来实现的。

HTML 代码

<div class="box3">
  <div class="center5">文字居中</div>
</div>

CSS 代码

.box3{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.center5{
  text-align: center;
  line-height: 200px;
}

效果展示


05

PART

五、使用网格布局

第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现,一种对元素本身属性进行设置,另一种在元素的父级元素中设置。两者看上去内容似乎差不多,不同的是在元素中设置的是 align-self 还要多了一个 margin,父级元素中是 align-items。

相关代码:

/* grid 元素中设置 */
.box4{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
}
.center6{
  align-self: center;
  justify-content: center;
  margin: auto;
}
/* grid 父级元素中设置 */
.box5{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-content: center;
}

效果展示:


六、总结

以上就是关于 CSS 如何将元素或者文字进行水平垂直居中的几种常用方法,大家还其他关于 CSS 实现水平垂直居中的方法吗?请在评论区留下你的想法。

关注w3cschool编程狮订阅更多IT资讯、技术干货~

、定位的基本概念

在我们浏览网页的过程中,经常会发现网页中的元素重叠展示,例如一个列表压在了一张图片之上,或者浏览器右下角突然弹出的广告压到了其他元素之上,这些都需要使用css的定位才能实现,本节我们就讲解css定位相关的属性,定位可以分为三类:

  • 绝对定位
  • 相对定位
  • 固定定位

二、css定位详解

我们可以通过position属性,将一个元素设置成定位元素,之后就可以通过top、left、bottom、right属性来设置元素的坐标。

绝对定位

将一个元素设置下面的属性:

1 element{
2     position:absolute;
3 }


元素就变成了一个绝对定位元素,实例代码如下所示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .box{
 8             width:100px;
 9             height:100px;
10             background-color: #f00;
11             border:1px solid #0f0;
12         }
13         .pos{
14             position: absolute; /*设置绝对定位元素*/
15             top:50px;           
16             left:50px;
17         }
18     </style>
19 </head>
20 <body>
21     <!-- 一个元素可以设置多个class属性,用空格区分开 -->
22     <div class="box">1</div>
23     <div class="box pos">2</div>
24     <div class="box">3</div>
25 </body>
26 </html>

从上面代码的效果中,我们可以了解以下几点:

  • 绝对定位元素脱离文档流,并不占位,第一个div和第三个div相邻。
  • 原点在整个网页左上角的位置。
  • 定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。

相对定位

将一个元素设置下面的属性:

1 element{
2     position:relative;
3 }

元素就变成了一个相对定位元素,实例代码如下所示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .box{
 8             width:100px;
 9             height:100px;
10             background-color: #f00;
11             border:1px solid #0f0;
12         }
13         .pos{
14             position: relative; /*设置相对定位元素*/
15             top:50px;
16             left:50px;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box">1</div>
22     <div class="box pos">2</div>
23     <div class="box">3</div>
24 </body>
25 </html>

从上面代码的效果中,我们可以了解以下几点:

  • 相对定位元素不脱离文档流,元素占位,第一个div和第三个div不相邻,中间的间距就是相对定位元素的位置。
  • 原点在其占位位置的左上角。
  • 定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。

固定定位

将一个元素设置下面的属性:

1 element{
2     position:fixed;
3 }

元素就变成了一个固定定位元素,实例代码如下所示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body{
 8             height:1000px;
 9         }
10         .box{
11             width:100px;
12             height:100px;
13             background-color: #f00;
14             border:1px solid #0f0;
15         }
16         .box2{
17             position: fixed; /*设置固定定位元素*/
18             top:50px;
19             left:50px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="box box1">1</div>
25     <div class="box box2">2</div>
26     <div class="box box3">3</div>
27 </body>
28 </html>

从上面代码的效果中,我们可以了解以下几点:

  • 固定定位元素脱离文档流,并不占位,第一个div和第三个div相邻。
  • 我们将body元素的高度设置成1000px,这样我们就可以通过滚轮控制网页显示的位置。
  • 原点在浏览器当前窗口的左上角。
  • 定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。
  • 当混轮滚动的时候,固定定位元素永远相对于窗户的位置定位。

设置参照物

理解了上面三种定位方法,我们再来考虑开始提到的那个问题,如果我们希望将一个数字列表压在一张图片之上。居中显示在网页之上,我们将数字列表设置定位之后,坐标应该设置成多少呢?因为居中的图片与浏览器窗口的左边距是不固定的,所以没有办法设置成一个固定值,这个时候,我们就需要给定位元素设置参照物。

将父级元素设置定位元素,那么子级元素定位的坐标原点会设置为父级元素左上角的位置。代码如下所示。

1 <div class="container">
2     <div class="box"></div>
3 </div>
 1  .container{
 2     width:300px;
 3     height:300px;
 4     border:1px solid blue;
 5     position: relative;;
 6     top:100px;
 7     left:100px;
 8 }
 9 .box{
10     border:blue 4px solid;
11     width:100px;
12     height:100px;
13     position:absolute;
14     top:10px;
15     left:20px;
16 }

父级容器不管是绝对定位,相对定位还是固定定位,都可以实现作为参照物的效果,在实际项目开发中,常用方法如下所示:

  1. 如果父级元素不脱离文档流,参与正常排版,那么父级设置相对定位。
  2. 如果父级需要根据视窗的显示位置而变化位置,可以设置固定定位。

一般父级容器不设置绝对定位。

注意事项

大家掌握了定位之后会发现一个问题,那就是只要我么使用定位,就可以实现所有的网页效果,再也不需要浮动布局,也不用管网页的树状结构了。

这样做其实是不可以的,在制作网页的过程中,我们不仅要将元素放在指定的位置,还要考虑网页的后续可维护性,已经针对不同屏幕尺寸的适应能力。因此,定位是我们实现网页布局的最后手段。多于一个新手来说,能不用定位来实现的布局,都不要用定位来实现。

三、课后练习

  1. 完成融职教育右侧返回顶部的悬浮效果。
  2. 制作一个在图片上显示图标描述文字的效果,并且图片再网页右下角显示。
  3. 制作一个标题效果,让标题左右两边各带一个横线(使用伪元素和定位来实现)。

【融职教育】在工作中学习,在学习中工作

联网前端技术中最基础的事情就是做页面。

做页面最基础的事情就是做版块的布局。

做布局最基础的事情就是元素的定位。

而定位竟又分出了5种类型:

  1. 正常定位 static
  2. 相对定位 relative
  3. 绝对定位 absolute
  4. 固定定位 fixed
  5. 粘性定位 sticky

说到定位,确实是个实践性很强的技术,光看文档和范例未必能准确理解掌握,一旦实际应用,如果没有章法,各种定位方式混在一起,相互作用,相互干扰,排版就变成了尴尬的算术题,往往越写越乱,经常会产生莫名其妙的排版结果,弄的很头大,即使最终做出了需要的页面效果,往往也是连蒙带猜,反复调试修改,花费大量时间不说,代码质量一定也很差。

所以无论初学者还是有一定经验的,无论是手写布局,还是使用各种UI框架做页面,都应该对这几种定位方式弄清楚细节,后续工作中才会更加顺利,事半功倍。

为此笔者精心制作了几张图解,配以对应的示范代码,并从实践的角度简化了定位的原则,旨在以一种更易于理解、更贴近实战的方式,让你看明白、搞清楚。

正常文档流

页面是如何建立起来的呢?是通过html和css代码形成页面结构,把各个元素块儿,像写word文档那样,让图片文字一个接一个地排列组合而成。正常的文档流,默认情况下,每个元素都会占用一定的空间,它们从左到右,从上到下依次排列,相互不会覆盖。

定位

所谓定位,就是人为的设定每个元素块上下左右的位置。之所以要定位,就是为了改变文档流中紧挨着的元素位置,实现我们所需要的排版意图。设定位置主要有2个途径:

1、在正常的文档流中:所有元素都可以通过 margin 控制它同外围4周元素的距离

2、有浮起特性的元素:通过 top,left,right,bottom 指定浮起后额外的位置偏移

所谓浮起,是指元素离开文档流,本身不再占据空间,好像飘浮在上面

定位就是设置 position 属性,它可以有5个类型,下面分别说明:

一、正常定位 static

position为空,则默认就是static,正常定位就是正常的文档流,所有元素都可以通过 margin 控制它同外围4周元素的距离,在写法上通常可以这样写

margin:1px 2px 3px 4px;

4个数值分别代表:矩形元素的4条边同上、右、下、左(就是顺时针走一圈)周围元素的距离。也可以分开写成 margin-top、margin-right、margin-bottom、margin-left

先简要介绍下实验用的代码:

实验代码的html部分如下

<div class="demo">static定位</div>
<div class="box">
	<div class="demo">(容器内)static定位</div>
	<div>(容器内)后面的文档流</div>
</div>

这个文档流是这样构成的:

首先一个div用static定位,下面跟一个容器div,容器中又有一个div也是static定位,后面跟一段文字块。

在后续几个定位模式中我们重复地使用这个html代码,仅仅修改其引用的css中的position属性,来观察变化。

实验代码的css部分如下

<style>
body{font-family:"Microsoft YaHei";margin:0;}
.box{
	width:400px;height: 200px;
	border: 1px solid green;background-color: #cfc;opacity:0.7;
	margin: 50px 0 0 50px;
}
.demo{
	position: static;
	width: 100px; height: 40px;
	border: 1px solid red;background-color: #fcc;opacity:0.8;color:red;
	top:50px;left:100px;
	margin:20px 0 0 10px;
}
</style>

body的样式定义了字体,设置页面边距为0,这个仅仅是做个基础效果,跟本次主题无关。

.box的样式是做为容器用的,我们统一设置为:

  • 容器款400高200,左边距50上边距50,边框绿色,背景浅绿半透明。后面我们简称其为“绿色容器块

.demo的样式是为测试定位用的:

  1. 设置基础样式宽100高40,边框红色,背景淡红半透明,字体红色
  2. 设置margin为左边距10,上边距20,设置浮动为top上边距50,left左边距100
  3. 设置position: static;

其中前2个设置是固定的,我们在后续几个定位模式中会重复地使用这部分css代码。至此,我们设置好了“2个红色块,一个在容器外,一个在容器内”。在容器外的红色块,其实就是以浏览器窗口为容器了。

现在只需通过修改position的不同类型,查看2个红色块儿和绿色容器的位置关系,就可以了解各种定位究竟是怎么回事了。

先看看正常定位时的效果:

这就是正常的文档流,2个红色块只有margin起作用,左边和上边各自距离上级容器10和20像素,而绿色容器的左边以窗口为基准,上边以上一个红色块底部为基准来定位50像素

二、相对定位 relative

.demo改一行css

position: relative;

看看效果

注意几个变化:

  • 红色块相对原来的位置移动了left和top的距离,其基准是各自所在的容器。
  • 绿色容器的位置没有变,仿佛仍然紧跟原来位置的红色块(仍占位)
  • 绿色容器里面的文字块位置没变,仿佛仍然紧跟容器内红色块原来的位置(仍占位)

三、绝对定位 absolute

.demo改一行css

position: absolute;

看看效果

我们看到了明显的变化:

  • 绿色的容器位置变了,其顶部的位置基准变成浏览器窗口的顶部,而不是跟着原来的红色块了。
  • 两个红色块也重叠到一起了,因为容器内部的红色块的位置基准也变成了浏览器窗口,
  • 绿色容器里面的文字块位置变了,容器内红色块原来的位置不再占用,所以文字提前了

接下来,如果我们把绿色容器的定位属性改一下会如何?

position: relative;

看看效果

效果跟刚才不一样了,区别在哪里呢?区别就是:

  • 2个红色块的位置基准,分别是各自原来的容器,即容器外的相对于浏览器窗口,容器内的相对于容器

四、固定定位 fixed

.demo改一行css

position: fixed;

仔细看我们发现跟前面position: absolute;时的第一种情况一样,没错,确实一样,但是有一个区别,就是当我们滚动屏幕的时候,所有元素都在滚动,只有那2个红色块是固定不会动的!而前面absolute状态时,2个红色块是跟着滚动的

五、粘性定位 sticky

.demo改一行css

position: sticky;

从外观上看跟static是一样的,不过sticky有个神奇的地方在于其“粘性”,我们重新写一段代码来演示它:

<style>
	body{background-color: #333;color:#eee;font-size:24px;margin:0;}
	.demo{
		width: 100%;height: 40px;
		background-color: #e00;
		position: sticky; top:10px;
	}
</style>
<!-- 顶部内容 -->
<div style="height:100px;">
	顶部菜单若干1<br>
	顶部菜单若干2<br>
	顶部菜单若干3<br>
</div>
<!-- 第1屏内容 -->
<div>
	<div class="demo">sticky定位,先走再停,第一屏走完我才走</div>
	正文第1屏1<br>
	正文第1屏2<br>
	正文第1屏3<br>
	正文第1屏4<br>
	正文第1屏5<br>
	正文第1屏6<br>
	正文第1屏7<br>
	正文第1屏8<br>
	正文第1屏9<br>
</div>
<!-- 第2屏内容 -->
<div style="height:10000px;color:#0e0;">
	正文第2屏1<br>
	正文第2屏2<br>
	正文第2屏3<br>
	正文第2屏4<br>
	正文第2屏5<br>
	正文第2屏6<br>
	正文第2屏7<br>
	正文第2屏8<br>
	正文第2屏9<br>
</div>

效果是这样:

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

总结一下:

正常定位 static(默认)

  • 平时是正常文档流、占据空间,用top,left指定位置是无效的
  • 用途:大部分时候默认都用这个,是整个页面的主文档流

相对定位 relative

  • 平时是正常文档流、占据空间
  • 指定位置top,left等后,相对于文档流进行偏移、并浮起,但不释放、也不改变原来占据的位置。
  • 用途:通常用于做容器,以此容器为基准,里面再放置其它元素,这些元素相对于本容器进行绝对定位,以便将位置整体固定下来。

绝对定位 absolute

  • 平时是正常文档流,但是浮起的,不占据空间
  • 指定位置top,left等后,分两种情况:
  • 1)如果其上级的position是空或者static

脱离正常文档流,相对于浏览器的大窗口进行偏移,原来的margin也一起叠加,

  • 2)如果其上级的position是relative或者其它定位

脱离同级文档流,相对于上级容器的位置进行偏移,原来的margin也一起叠加。

  • 滚动:有效。
  • 用途:通常用于与上级relative容器搭配,做容器的子元素,这些元素相对于本容器进行绝对定位,以便将位置整体固定下来。

固定定位 fixed

  • 平时是正常文档流,但是浮起的,不占据空间
  • 指定位置top,left等后,脱离正常文档流,相对于浏览器的大窗口进行偏移,原来的margin也一起叠加。
  • 滚动:无效。
  • 用途:通常用于做头部,尾部的导航、漂浮的菜单、广告、客服入口提示等

粘性定位 sticky

  • 平时是正常文档流,占据正常空间。指定位置top,left等是无效的。
  • 当拉动滚动条后,元素一开始在页面滚动时也如同在正常流中,
  • 但页面向上滚动到top位置时就会固定在屏幕上,浮起不动,如同fixed一般。
  • 当页面继续向上滚动,直到到它的上级容器的底部跟它的底部接触后,就一起向上滚动,直到滚出屏幕。
  • 这个属性值在浏览器兼容性上比较差,低版本不支持。
  • 用途:通常用于做头部的关键导航区

像上面这样一一罗列下来,仍然是很罗嗦的不是吗?其实这就是一个通过做实验,归纳总结,走脑子的过程,在没有实践经历的时候,这些实验性的代码,把空洞的理论呈现了出来,而如何在实践中用上这些定位的知识才是我们的最终目标。

定位3大原则:

从实战的角度我把定位大致简化为3个原则,既然是简化的,因此就不太严谨,忽略了一些细节,也不是唯一最优方案,但多数情况下还是适用的,而且此简化方案大大降低了使用的复杂性。

1、弄清一个块儿在文档流中是否占据位置空间?

  • 正常定位、相对定位relative,都是正常摆放的块儿,要占空间;
  • 绝对定位absolute、固定定位fixed,都是浮起的块儿,不占位置。

2、弄清如何设定一个块儿的位置,其坐标是以谁为基准?

  • 凡是要占空间的块儿,用margin等确定位置,它是以4周相邻元素为基准;
  • 凡是不占位置的块儿,尽量用top,left 等确定位置,它是以浏览器窗口(父容器为static或空时)或父容器为基准的。

3、上述5种定位方式在实践中如何选用?

  • 一般情况,只要是可以简单依次排列的,就用默认的正常定位顺次摆放元素即可;
  • 局部的复杂精确排版,比如页面中部的标题图片列表,使用relative定位的块儿做容器,内部元素相对于此容器做absolute绝对定位完成布局;
  • 局部需要固定位置,不随滚动条滚动的,比如页面头部尾部,使用fixed固定定位或sticky粘性定位。

至此,position定位的知识总结完了,排版布局终于有简单的章法可依了,是不是很容易看懂呢?