前端三部曲之Css-- 1(常见的居中方式)
2024-09-06 22:32:26
下面来介绍一下web端页面最常见的居中方式
页面的基本结构:一个简单的div
<!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>Document</title>
<style>
:root , html{
height: 100%;
width: 100%;
}
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="mid"></div>
</body>
</html>
</html>
1.利用position
:root , html{
height: 100%;
width: 100%;
}
div{
width: 100px;
height: 100px;
background: red;
}
.mid{
position: absolute;
top: 50%;
left: 50%;
/* 通过top 50% 和 left 50% 让div的左顶点居中 */
}
几种让div自身平移一半的方法
1.对于已知宽高
通过margin平移自身大小的一半
.mid{
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top:-50px;
}
通过calc函数进行计算
.mid{
position: absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);
}
通过transform中的translate
.mid{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
2.利用flex弹性盒模型
body{
width: 100%;
height:100%;
display: flex;
align-items:center;
justify-content: center;
}
3.利用margin:auto 加position 四个方向为0
四个方向设置为0,用
.mid{
position: absolute;
margin:auto;
left:;
top:;
bottom:;
right:;
}
4.利用table table-cell
利用table-cell可以使用vertical-align: middle实现垂直居中
再在其子元素里用margin实现垂直居中即可
<!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>Document</title>
<style>
:root,
html {
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 100%;
display: table;
}
.wrapper {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.mid {
margin:0 auto;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="mid">
</div>
</div>
</body>
</html>
让文字在块级元素内水平垂直居中
<div class="mid">123</div>
.mid{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: red;
}
垂直水平居中的方式就分享到这里。单独的垂直或者水平居中原理相同只要分开了用即可
以上就是常用的居中方式,最经常使用到的就是用盒模型的margin和flex弹性盒子来进行居中
也推荐使用这两种方式。
如果有任何的疑问欢迎一起交流讨论,后续如果还有什么其他的居中方式也会及时补充。
.mid{
position: absolute;
margin:auto;
left: ;
top: ;
bottom:;
right: ;
}
最新文章
- iOS 图片选择器 总结
- nil、Nil、NULL、NSNull的区别
- zoom和transform:scale的区别
- wifi使用的一些误区
- PA
- smartgit document Rebase
- pig中变量
- JS实现滚动条滚到页面距离底部300px时执行事件的方法
- Educational Codeforces Round 6 D. Professor GukiZ and Two Arrays
- Github博客地址
- C#4 for循环 迭代法 穷举法应用
- 地图学与GIS制图的基础理论(一)
- Hue 之 SparkSql interpreters的配置及使用
- numpy.squeeze()是干啥的
- Linux c 获取cpu使用率(2)
- 小程序开发基础-swiper 滑块视图容器
- hibernate主配置文件中指定session与当前线程绑定
- iptables学习笔记_____摘自朱双印个人日志 ____http://www.zsythink.net/
- codevs 1082 线段树练习 3 区间更新+延迟标记
- perl6 HTTP::UserAgent发送post