前端CSS居中布局(上)

简介: 前端CSS居中布局

在前端开发中,实现居中布局是一项必备技能,无论是垂直居中、水平居中,还是同时实现垂直和水平居中。这不仅对于构建响应式网页至关重要,还在设计弹窗、创建导航菜单和设计登录界面时都能派上用场。精通居中布局将为你的前端技能提升加分,并为你的项目增添专业的光彩。除此之外,居中布局也是前端面试中的高频面试题,理解学会它,并能够不看着博客熟练的写出来,一定能够帮助你在面试中给面试官一个好印象,从而拿下面试!

让我们一起开始这个令人兴奋的居中布局之旅吧!无论你是刚刚入门,还是渴望进一步提升前端技能,本篇博客都将为你带来价值与启发。让我们一同进入居中布局的奇妙世界,为你的前端之路增添更多光彩!

 

水平居中

内联元素

对于内联元素,实现水平居中可以使用text-align属性。将包含内联元素的父元素的text-align属性设置为center即可实现子元素的水平居中。

text-align: center;

适用对象

  • 内联元素 line
  • 内联块inline-block
  • 内联表inline-table
  • inline-flex 元素
<!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>
        .block {
            width: 200px;
            height: 200px;
            background-color: purple;
            text-align: center;
        }
        span {
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="block">
        <span>我居中了</span>
    </div>
</body>
</html>

示例:

优点
  • 简单快捷,兼容性好
缺点
  • 只对行内内容有效
  • 属性会继承影响到后代行内内容
  • 如果子元素宽度大于父元素宽度则无效,但是后代行内内容中宽度小雨设置 text-align 属性的元素宽度的时候,也会继承水平居中

块级元素

通过固定宽度块级元素的 margin-left 和 margin-right 设成 auto,就可以使块级元素水平居中。\

<!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>
        .block {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .yb {
            background-color: yellow;
            width: 100px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="block">
        <div class="yb">
            aaa
        </div>
    </div>
</body>
</html>

多个块级元素

如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为 inline-block 和父容器的 text-align 属性从而使多块级元素水平居中。

<!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: 400px;
            height: 400px;
            background-color: purple;
            text-align: center;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: yellow;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">child1</div>
        <div class="child">child2</div>
    </div>
</body>
</html>

弹性布局

利用弹性布局,实现水平居中,其中 align-items 用于设置弹性盒子元素在主轴方向上的对齐方式。

<!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 {
            display: flex;
            justify-content: center;
            width: 300px;
            height: 300px;
            background-color: purple;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">child</div>
    </div>
</body>
</html>

优点

适用于任意个元素

缺点

PC 端兼容性不好

固定宽度-外边距偏移

先相对于父元素向右偏离半个父元素宽度,然后使用负左外边距校正居中元素的偏移量

<!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 {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: purple;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 50%;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">
            child
        </div>
    </div>
</body>
</html>

优点
  • 兼容性好
  • 不管块级还是行内元素都可以实现
缺点
  • 脱离文档流
  • 使用 margin-left 需要知道宽度值

未知宽度-外边距偏移

<!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 {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: purple;
        }
        .child {
            background-color: yellow;
            margin-left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child">
            child
        </div>
    </div>
</body>
</html>

垂直居中

内联元素

可以使用行高属性line-height

<!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 {
            height: 300px;
            width: 300px;
            line-height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="dad">
        child
    </div>
</body>
</html>

目录
相关文章
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
318 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
5月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
139 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
134 1
AI助理

你好,我是AI助理

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