SS 是前端里面的基础之一,也是非常重要的一部分,它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中,总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。
当元素有给定的高度以及宽度的时候,使用 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 来实现。但是,使用的同时还需要结合其他属性才完整实现。因为,单是设置 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定位相关的属性,定位可以分为三类:
我们可以通过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>
从上面代码的效果中,我们可以了解以下几点:
将一个元素设置下面的属性:
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>
从上面代码的效果中,我们可以了解以下几点:
将一个元素设置下面的属性:
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>
从上面代码的效果中,我们可以了解以下几点:
理解了上面三种定位方法,我们再来考虑开始提到的那个问题,如果我们希望将一个数字列表压在一张图片之上。居中显示在网页之上,我们将数字列表设置定位之后,坐标应该设置成多少呢?因为居中的图片与浏览器窗口的左边距是不固定的,所以没有办法设置成一个固定值,这个时候,我们就需要给定位元素设置参照物。
将父级元素设置定位元素,那么子级元素定位的坐标原点会设置为父级元素左上角的位置。代码如下所示。
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 }
父级容器不管是绝对定位,相对定位还是固定定位,都可以实现作为参照物的效果,在实际项目开发中,常用方法如下所示:
一般父级容器不设置绝对定位。
大家掌握了定位之后会发现一个问题,那就是只要我么使用定位,就可以实现所有的网页效果,再也不需要浮动布局,也不用管网页的树状结构了。
这样做其实是不可以的,在制作网页的过程中,我们不仅要将元素放在指定的位置,还要考虑网页的后续可维护性,已经针对不同屏幕尺寸的适应能力。因此,定位是我们实现网页布局的最后手段。多于一个新手来说,能不用定位来实现的布局,都不要用定位来实现。
【融职教育】在工作中学习,在学习中工作
联网前端技术中最基础的事情就是做页面。
做页面最基础的事情就是做版块的布局。
做布局最基础的事情就是元素的定位。
而定位竟又分出了5种类型:
说到定位,确实是个实践性很强的技术,光看文档和范例未必能准确理解掌握,一旦实际应用,如果没有章法,各种定位方式混在一起,相互作用,相互干扰,排版就变成了尴尬的算术题,往往越写越乱,经常会产生莫名其妙的排版结果,弄的很头大,即使最终做出了需要的页面效果,往往也是连蒙带猜,反复调试修改,花费大量时间不说,代码质量一定也很差。
所以无论初学者还是有一定经验的,无论是手写布局,还是使用各种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的样式是做为容器用的,我们统一设置为:
.demo的样式是为测试定位用的:
其中前2个设置是固定的,我们在后续几个定位模式中会重复地使用这部分css代码。至此,我们设置好了“2个红色块,一个在容器外,一个在容器内”。在容器外的红色块,其实就是以浏览器窗口为容器了。
现在只需通过修改position的不同类型,查看2个红色块儿和绿色容器的位置关系,就可以了解各种定位究竟是怎么回事了。
先看看正常定位时的效果:
这就是正常的文档流,2个红色块只有margin起作用,左边和上边各自距离上级容器10和20像素,而绿色容器的左边以窗口为基准,上边以上一个红色块底部为基准来定位50像素
二、相对定位 relative
.demo改一行css
position: relative;
看看效果
注意几个变化:
三、绝对定位 absolute
.demo改一行css
position: absolute;
看看效果
我们看到了明显的变化:
接下来,如果我们把绿色容器的定位属性改一下会如何?
position: relative;
看看效果
效果跟刚才不一样了,区别在哪里呢?区别就是:
四、固定定位 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(默认)
相对定位 relative
绝对定位 absolute
脱离正常文档流,相对于浏览器的大窗口进行偏移,原来的margin也一起叠加,
脱离同级文档流,相对于上级容器的位置进行偏移,原来的margin也一起叠加。
固定定位 fixed
粘性定位 sticky
像上面这样一一罗列下来,仍然是很罗嗦的不是吗?其实这就是一个通过做实验,归纳总结,走脑子的过程,在没有实践经历的时候,这些实验性的代码,把空洞的理论呈现了出来,而如何在实践中用上这些定位的知识才是我们的最终目标。
定位3大原则:
从实战的角度我把定位大致简化为3个原则,既然是简化的,因此就不太严谨,忽略了一些细节,也不是唯一最优方案,但多数情况下还是适用的,而且此简化方案大大降低了使用的复杂性。
1、弄清一个块儿在文档流中是否占据位置空间?
2、弄清如何设定一个块儿的位置,其坐标是以谁为基准?
3、上述5种定位方式在实践中如何选用?
至此,position定位的知识总结完了,排版布局终于有简单的章法可依了,是不是很容易看懂呢?
*请认真填写需求信息,我们会在24小时内与您取得联系。