前端面试题:CSS实现水平垂直居中
2024-08-30 07:56:17
这是一个挺常见的前端面试题,但是没有做过总结。有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记。所以,温故而知新,还是很有必要的。
一、绝对定位元素的居中实现
这一种工作中用的应该是最多的,兼容性也是很好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位元素的居中实现margin</title>
<style>
.center-vertical{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /*高度的一半*/
margin-left: -50px; /宽度的一半*/
}
</style>
</head>
<body>
<div class="center-vertical"></div>
</body>
</html>
效果:
缺点:需要提前知道元素的尺寸。如果不知道元素尺寸,这个时候就需要JS获取了。
CSS3.0的兴起,使这个问题有了更好的解决方法,就是使用 transform 代替 margin 。
transform 中 translate 偏移的百分比是相对于自身大小而说的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>未知宽高的元素水平垂直居中transform</title>
<style>
.content{
background: orange;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}
</style>
</head>
<body>
<div class="content">你复合1233肥反反复复</div>
</body>
</html>
效果:
优点:无论绝对定位元素的尺寸是多少,它都是水平垂直居中显示的。
缺点:就是兼容性问题。
二、margin: auto;实现绝对定位元素的居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin:auto实现绝对定位元素的居中</title>
<style>
.center-vertical{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="center-vertical"></div>
</body>
</html>
效果:
注意:
上下左右均为 0 位置绝对定位。
margin: auto;
三、CSS3.0弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中==弹性布局</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;/*定义body的元素垂直居中*/
justify-content: center;/*定义body的元素水平居中*/
}
.content{
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果:
四、vertical-align:middle;垂直方向居中
verical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
允许指定负长度值和百分比值。这会是元素降低而不是升高。
在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vertical-align:middle;</title>
<style>
.big-box{
width: 500px;
height: 400px;
background: green;
text-align: center;
}
.box{
line-height: 400px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="big-box">
<span class="box">
<img src="ermao.jpg"/>
</span>
</div>
</body>
</html>
效果:
五、display:table实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display: table-cell;</title>
<style>
.parent{
width: 300px;
height: 300px;
background: orange;
text-align: center;
display: table;
}
.son{
display: table-cell;
background-color: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">nihaosssss</div>
</div>
</body>
</html>
效果:
六、相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现水平垂直居中==相对定位实现</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content{
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;/*水平居中*/
position: relative;/*设置position*/
top: 50%; /*偏移*/
/*margin-top: -150px;*/ /*第一种:margin-top*/
transform: translateY(-50%);/*第二种:transform:转换*/
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果:
最新文章
- iOS -- 轮播图
- [Modern OpenGL系列(三)]用OpenGL绘制一个三角形
- Unity3D热更新全书-脚本(三) C#LightEvil语法与调试
- ABAP--关于ABAP流程处理的一些命令的说明(stop,exit,return,check,reject)
- hdu 2014 青年歌手大奖赛_评委会打分
- PHP中的NULL类型
- jvm分析(MD语法)
- Bootstrap系列 -- 15. 下拉选择框select
- POJ 1062 dij
- 026. asp.net中将图片以二进制方式保存到数据库并以HTTP流方式输出
- Python基础-数据类型和变量
- 企业级缓存系统varnish应用
- 排序算法以及其java实现
- nginx1.14.0版本负载均衡配置
- jQuery中异步问题:数据传递
- ceph API之PHP的S3-SDK包的泛域名解析问题
- 20171104xlVBA制作联合成绩条
- Kali Linux更新源以及设置中文
- 【bzoj4337】【Bjoi2015】树的同构
- CentOS ext4 磁盘分区 格式化 挂载