css:整理9种元素水平垂直居中的方法

简介: css:整理9种元素水平垂直居中的方法

image.png

容器基础样式


/* 容器基础样式 */
.box-wrap {
    width: 400px;
    height: 400px;
    border: 1px solid #eeeeee;
    margin-top: 20px;
}
.box {
    width: 200px;
    height: 200px;
    background-color: green;
    /* 文字居中 */
    text-align: center;
    color: #ffffff;
    line-height: 200px;
}

1、flex


.box-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

2、table-cell


.box-wrap {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box{
    display: inline-block;
}

3、margin+transform


.box {
    margin: 50% auto;
    transform: translateY(-50%);
}

4、inline-block + vertical-align(没有测试通过)

.box-wrap{
    /*使行内元素或者行内块级元素水平居中*/
    text-align: center;
}
.box {
    display: inline-block;
    vertical-align: middle;
}

5、absolute + margin


.box-wrap {
    position: relative;
}
.box {
    position: absolute;
    left: 50%;
    top: 50%;
    /*  盒子高度的一半 */
    margin-left: -100px;
    margin-top: -100px;
}

6、absolute + margin-auto


.box-wrap {
    position: relative;
}
.box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

7、absolute + transform


.box-wrap {
    position: relative;
}
.box {
    position: absolute;
    left: 50%;
    top: 50%;
    /*  移动自身的50% */
    transform: translate(-50%, -50%);
}

8、grid + self


.box-wrap {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

9、grid + items


.box-wrap {
    display: grid;
    place-items: center;
}

相关文章
|
2月前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
482 60
|
2月前
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
107 5
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
|
2月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
87 7
|
2月前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
2月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
3月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
34 0
|
3月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
38 0
|
3月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
305 0
|
8月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
6月前
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
57 0

热门文章

最新文章