【前端｜CSS系列第4篇】面试官：你了解居中布局吗？

news2024/10/6 10:31:53

在这里插入图片描述
欢迎来到前端CSS系列的第4篇教程！如果你正在寻找一种简单而又强大的前端技术，以使你的网页和应用程序看起来更加专业和美观，那么居中布局绝对是你不能错过的重要知识。

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

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

水平居中

内联元素

对于内联元素，实现水平居中可以使用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>

在这里插入图片描述

多行元素

表格布局

使用表格布局的 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-content 和 align-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>

在这里插入图片描述

总结

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

如果你觉得这篇文章对你面试提供到帮助的话，麻烦关注+三连哦！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/819942.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DC电源模块输出电压的调节范围

DC电源模块输出电压的调节范围

BOSHIDA DC电源模块输出电压的调节范围 DC电源模块是一种可以将交流电转换为直流电的设备&#xff0c;可以广泛应用于电子、通信、工业自动化等领域。在实际使用中&#xff0c;输出电压的调节范围非常重要&#xff0c;因为它决定了该模块能够适应的电器设备的种类和使用范围。…
阅读更多...
（自控原理）自动控制的一般概念

（自控原理）自动控制的一般概念

1、自动控制理论发展简史 1.1经典控制理论&#xff08;19世纪初—20世纪50年代) 时域法 复域法(根轨迹法) 频域法 1.2 现代控制理论&#xff08;20世纪60年代—&#xff09; 线性系统 自适应控制预测控制 最优控制 鲁棒控制 滑模控制 最佳估计 容错控制 大系统复杂系统 系…
阅读更多...
golang自带的命令行解析库flag库实践

golang自带的命令行解析库flag库实践

1. 简介 flag用于解析命令行选项。有过类 Unix 系统使用经验的童鞋对命令行选项应该不陌生。例如命令ls -al列出当前目录下所有文件和目录的详细信息&#xff0c;其中-al就是命令行选项。 命令行选项在实际开发中很常用&#xff0c;特别是在写工具的时候。 指定配置文件的路径…
阅读更多...
高压开关柜温度在线监测系统设计

高压开关柜温度在线监测系统设计

摘要&#xff1a;在当前的社会之中&#xff0c;电力资源是最重要的能源资源之一&#xff0c;人们对于电力资源的依赖程度也逐渐升高&#xff0c;到目前为止&#xff0c;任何人的生活与工作都不能离开电力资源&#xff0c;这就导致电力系统的普及型大大提高。电力系统具有着极高…
阅读更多...
小程序原生实现左右锚点联动

小程序原生实现左右锚点联动

效果 wxml <view classbox><scroll-view scroll-y scroll-with-animation style"width:25%"><view classnav><view wx:for"{{navList}}" wx:keyindex class"title {{index active ?select:}}"data-index{{index}} bin…
阅读更多...
el-select 中加了filterable 点击箭头下拉框回收不去问题

el-select 中加了filterable 点击箭头下拉框回收不去问题

解决方式①&#xff1a;参考连接&#xff1a;&#xff08;亲测有用&#xff09;【element-select】添加过滤属性以及change后下拉框异常_element select过滤时,不收起下拉框_Y.哈哈的博客-CSDN博客 1、添加过滤属性后点击下箭头不收起下拉框 2、change通过dialog触发事件后&…
阅读更多...
新能源光学膜厚测量仪

新能源光学膜厚测量仪

能源是人类社会可持续发展的动力源泉和重要生存基础。近年来&#xff0c;新能源的研究受到世界各国的高度重视&#xff0c;包括太阳能、风能和潮汐能等在内的可再生能源正在成为传统化石燃料有希望的替代品&#xff0c;因此&#xff0c;开发低成本、大规模的能源转换技术与新型…
阅读更多...
【laravel+vue2 】医院信息化手术麻醉临床信息管理系统源码

【laravel+vue2 】医院信息化手术麻醉临床信息管理系统源码

近年来&#xff0c;医院信息化成为医院领域的推广重点&#xff0c;HIS、LIS、PACS、EMR等信息系统的相继出现&#xff0c;显著提高了医院业务的运行效率。手术麻醉系统作为医院信息系统的一部分&#xff0c;由监护设备数据采集系统和麻醉信息管理系统两个子系统组成。 一、医院…
阅读更多...
【LeetCode】【数据结构】单链表OJ常见题型（一）

【LeetCode】【数据结构】单链表OJ常见题型（一）

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负。 目录 前言&#xff1a; 【LeetCode】203.移除链表元素 【LeetCo…
阅读更多...
不同语言操作符的优先级

不同语言操作符的优先级

看到标题&#xff0c;可能会心生疑惑: 这么基础且重要的操作&#xff0c;不同语言不应该是一致的吗&#xff1f; 并不一定&#xff0c;比如对于右移运算和加法运算&#xff0c;Go就与其他多数语言表现得不一致&#xff1a; Go: package mainimport "fmt"func main() …
阅读更多...
解密Redis：应对面试中的缓存相关问题

解密Redis：应对面试中的缓存相关问题

文章目录 1. 缓存穿透问题及解决方案2. 缓存击穿问题及解决方案3. 缓存雪崩问题及解决方案4. Redis的数据持久化5. Redis的过期删除策略和数据淘汰策略6. Redis分布式锁和主从同步7. Redis集群方案8. Redis的数据一致性保障和高可用性方案 导语&#xff1a; 在面试过程中&#…
阅读更多...
社区说|Flutter 一知半解，带你拨云见月

社区说|Flutter 一知半解，带你拨云见月

Hello&#xff0c;大家好&#xff0c;我是 Flutter GDE 郭树煜&#xff0c;今天的主题是科普向的分享内容&#xff0c;主要是带大家更全面的去理解 Flutter &#xff0c;尽可能帮助大家破除一些误解&#xff0c;分享内容不会特别长&#xff0c;但是应该会帮助你从新认识下 Flut…
阅读更多...
C++源码使用make生成动态库和静态库

C++源码使用make生成动态库和静态库

我这个新电脑&#xff0c;没装Homebrew&#xff0c;把这个复制进终端安装。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 下载过程如下所示
阅读更多...
blender凹凸感和置换形变

blender凹凸感和置换形变

一、怎么做出凹凸感 需要三个部分的内容&#xff1a; 1、一个基础的纹理&#xff1a;告诉计算机需要用一个什么样的纹理做凹凸&#xff0c;纹理一般采用黑白&#xff0c;在计算机里面&#xff0c;从 0 - 1之间的值可以用从黑到白之间不同的灰度来表示因此&#xff0c;有一张黑白…
阅读更多...
char类型到底是有符号还是无符号的？

char类型到底是有符号还是无符号的？

最近在整理代码时&#xff0c;发现有一些如下类型的警告&#xff1a; ..\XXXXX\XXXXX.c(224): warning: #186-D: pointless comparison of unsigned integer with zero 这个警告的意思是无符号数与0比较是无意义&#xff0c;而我报警告的代码行如下&#xff1a; char len_v…
阅读更多...
阿里用户序列建模ETA

阿里用户序列建模ETA

End-to-End User Behavior Retrieval in Click-Through Rate Prediction Model 摘要 现实很少有工作可以处理长序列用户建模的问题&#xff0c;SIM提出了两阶段方法。第一阶段&#xff0c;辅助任务旨在从长序列用户行为检索最相关的用户行为序列。第二阶段&#xff0c;经典的…
阅读更多...
位图和 DC 有什么特别之处？

位图和 DC 有什么特别之处？

相信设备上下文 (DC, Device Context) 对你来说&#xff0c;应该很熟悉。 基本工作方式是&#xff0c;你可以通过调用 SelectObject 来将画笔(Pen)&#xff0c;画刷(Brush)&#xff0c;字体(Font)和位图(Bitmap)等这些对象选入设备上下文中&#xff0c;但是&#xff0c;这里的位…
阅读更多...
Android 面试题 应用程序结构 十一

Android 面试题 应用程序结构 十一

&#x1f525; Framework主要包含以下模块 &#x1f525; ActivityManagerService 这是一个Activity的管理者&#xff0c;负责管理所有Activity的生命周期。WindowManagerService 它是手机屏幕的的管理者&#xff0c;管理着屏幕的详细情况&#xff0c;所有对屏幕的操作最终都…
阅读更多...
ChatGPT学python——制作自己的AI模型（一）初步了解

ChatGPT学python——制作自己的AI模型（一）初步了解

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★前端炫酷代码分享 ★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ 解决算法&#xff0c;一个专栏就够了★ ★ 架…
阅读更多...
2023国际先进制造青年科学家大会圆满结束！易知微受邀进行数字孪生主题报告分享

2023国际先进制造青年科学家大会圆满结束！易知微受邀进行数字孪生主题报告分享

2023年7月30日&#xff0c;以“新青年&#xff0c;新视野&#xff0c;新制造”为主题的2023国际先进制造青年科学家大会在浙江绍兴开幕&#xff0c;旨在强力推进创新深化改革攻坚开放提升&#xff0c;进一步做强“人才&#xff0b;产业”双联驱动、人才集聚与产业发展共振同兴&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023