前端CSS居中布局(下)

简介: 前端CSS居中布局

多行元素

表格布局

使用表格布局的 vertical-align: middle 可以实现子元素的垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table-common {
            display: table;
            height: 100px;
            width: 100px;
            background: purple;
        }
        .table-child {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="table-common table-parent">
        <div class="table-child">child1</div>
        <div class="table-child">child2</div>
    </div>
</body>
</html>

弹性布局

利用弹性布局实现垂直居中,其中 flex-direction: column 定义主轴方向为纵向。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dad {
            width: 200px;
            height: 200px;
            background-color: purple;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div>child1</div>
        <div>child2</div>
    </div>
</body>
</html>

块级元素

固定高度-定位-外边距偏移

当居中元素的 高度和宽度 已知时,垂直居中问题就很简单。通过 绝对定位 元素距离顶部 50%,并设置 margin-top 向上偏移元素高度的一半,就可以实现垂直居中了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dad {
            width: 300px;
            height: 300px;
            background-color: purple;
            position: relative;
        }
        .child {
            position: absolute;
            top: 50%;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">child</div>
    </div>
</body>
</html>

未知高度-外边距偏移

与 块级元素-有滚动条 实现效果类似,只是对定位元素自身的偏移使用 transform 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dad {
            width: 300px;
            height: 300px;
            background-color: purple;
            overflow: hidden;
        }
        .child {
            background-color: yellow;
            margin-top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">
            child
        </div>
    </div>
</body>
</html>

水平垂直居中

垂直居中文本

通过设置父元素容器 text-align 实现水平居中,设置一致的高度(height)和行高(line-height)实现对子元素的垂直居中,垂直居中元素设置 vertical-align 以及 line-height 为 initial 实现子元素内部的基准线垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dad {
            width: 300px;
            height: 300px;
            background-color: purple;
            text-align: center;
            line-height: 300px;
        }
        .child {
            display: inline-block;
            vertical-align: middle;
            line-height: initial;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">Hello world!</div>
    </div>
</body>
</html>

固定宽高元素

使用绝对定位向右向下定位至父元素宽度和高度的50%,再使用margin向上和想左偏移自身的50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dad {
            width: 300px;
            height: 300px;
            background-color: purple;
            position: relative;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">
            child
        </div>
    </div>
</body>
</html>

未知宽高元素

使用margin让自身向右向下偏移50%,使用 transform + translate 将垂直居中元素自身偏移负 50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dad {
            width: 300px;
            height: 300px;
            background-color: purple;
            overflow: hidden;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 50%;
            margin-left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">
            child
        </div>
    </div>
</body>
</html>

弹性布局

父元素设置为弹性布局容器,并将 justify-contentalign-items 设置为 center 居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dad {
            width: 300px;
            height: 300px;
            background-color: purple;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">
            弹性布局
        </div>
    </div>
</body>
</html>

总结

本篇博客详细介绍了居中布局的多种实现方式,涵盖了水平居中、垂直居中以及水平垂直居中的场景,并提供了实用的示例代码。无论你是前端新手还是有一定经验的开发者,掌握这些居中布局的技巧都将对你在前端开发中有所裨益。希望通过本篇博客,你能够更好地理解和运用居中布局,提升自己的前端技能,构建更美观、专业的网页。

 

目录
打赏
0
0
0
0
2
分享
相关文章
|
10天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
29 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
54 1
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
69 6
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
80 4
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
60 2
实现CSS品字布局
【10月更文挑战第27天】
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。

热门文章

最新文章

  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    64
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    29
  • 5
    巧用通义灵码,提升前端研发效率
    94
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    147
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    40
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    129
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等