CSS水平垂直居中回顾总结
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
前言
用了一段时间的 material-ui,都很少自己动手写原生的样式了。但html, css, js 始终是前端的三大基础,这周突然想到 CSS水平居中方案,因为用多了 flex
和 margin: auto
等这类方案解决,在回顾还有几种方案可以解决,于是打算温故知新,重新打下代码,写下该文作为笔记。
html 代码
<div class="parent">
<div class="child"></div>
</div>
css 代码
.parent {
width: 300px;
height: 300px;
background-color: blue;
}
.child {
width: 100px;
height: 100px;
background-color: red;
}
下面代码基于上述代码增加,不会再重复写。要实现的效果是让子元素在父元素中水平垂直居中
一、flex 布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
这是最经典的用法了,不过,也可以有另一种写法实现:
.parent {
display: flex;
}
.child {
align-self: center;
margin: auto;
}
二、absolute + 负 margin
该方法适用于知道固定宽高的情况。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
三、absolute + transform
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
四、absolute + margin auto
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
五、absolute + calc
该方法适用于知道固定宽高的情况。
.parent {
position: relative;
}
.child {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
六、text-align + vertical-align
.parent {
text-align: center;
line-height: 300px; / 等于 parent 的 height /
}
.child {
display: inline-block;
vertical-align: middle;
line-height: initial; / 这样 child 内的文字就不会超出跑到下面 /
}
七、table-cell
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
}
八、Grid
.parent {
display: grid;
}
.child {
align-self: center;
justify-self: center;
}
九、writing-mode
.parent {
writing-mode: vertical-lr;
text-align: center;
}
.child {
writing-mode: horizontal-tb;
display: inline-block;
margin: 0 calc(50% - 50px);
}
- ps: 个人技术博文Github仓库,觉得不错的话欢迎star,给我一点鼓励吧~
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
“CSS水平垂直居中回顾总结” 的相关文章
css加载会造成阻塞吗?1年前 (2023-02-02)
CSS 伪类1年前 (2023-02-02)
HTML+CSS+JQuery全屏滚动特效完整源码附注释1年前 (2023-02-02)
【HTML | CSS】春节将至,为网页挂上精美的灯笼吧(附源码)程序员的浪漫1年前 (2023-02-02)
第五届字节跳动青训营 前端进阶学习笔记(五)CSS进阶1年前 (2023-02-02)
新年将至,100行Html+css实现烟花特效陪你跨年(附春节对联)1年前 (2023-02-02)
【前端面试 | css面试题整理】1年前 (2023-02-02)
[前端笔记——CSS] 10.层叠与继承、选择器1年前 (2023-02-02)
【每日CSS3代码】1年前 (2023-02-02)
CSS中的各种格式化上下文-FC(BFC、IFC、GFC、FFC)1年前 (2023-02-03)