设为首页收藏本站
开启辅助访问 切换到窄版
搜索
爱开源网»首页 › 前端中台 › Web开发 › 【前端｜CSS系列第4篇】口试官：你了解居中布局吗？ ...

[web教学] 【前端｜CSS系列第4篇】口试官：你了解居中布局吗？

[复制链接]
查看1037 | 回复0 | 2023-8-16 16:33:45 | 显示全部楼层 |阅读模式 来自 中国北京

欢迎来到前端CSS系列的第4篇教程！如果你正在探求一种简单而又强大的前端技能，以使你的网页和应用步伐看起来更加专业和雅观，那么居中布局绝对是你不能错过的紧张知识。
在前端开辟中，实现居中布局是一项必备技能，无论是垂直居中、水平居中，还是同时实现垂直和水平居中。这不光对于构建相应式网页至关紧张，还在设计弹窗、创建导航菜单和设计登录界面时都能派上用场。醒目居中布局将为你的前端技能提拔加分，并为你的项目增长专业的光彩。除此之外，居中布局也是前端口试中的高频口试题，明白学会它，并可以或许不看着博客纯熟的写出来，肯定可以或许资助你在口试中给口试官一个好印象，从而拿下口试！
让我们一起开始这个令人高兴的居中布局之旅吧！无论你是刚刚入门，还是渴望进一步提拔前端技能，本篇博客都将为你带来代价与开导。让我们一同进入居中布局的奥妙世界，为你的前端之路增长更多光彩！
水平居中

内联元素

对于内联元素，实现水平居中可以使用text-align属性。将包罗内联元素的父元素的text-align属性设置为center即可实现子元素的水平居中。
  1. text-align: center;
复制代码
实用对象



  • 内联元素 line
  • 内联块 inline-block
  • 内联表 inline-table
  • inline-flex 元素
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         <span>我居中了</span>
  14.    
  15. </body>
  17. </html>
复制代码
示例：

优点



  • 简单快捷，兼容性好
缺点



  • 只对行内内容有用
  • 属性会继续影响到后代行内内容
  • 如果子元素宽度大于父元素宽度则无效，但是后代行内内容中宽度小雨设置 text-align 属性的元素宽度的时候，也会继续水平居中
块级元素

通过固定宽度块级元素的 margin-left 和 margin-right 设成 auto，就可以使块级元素水平居中。
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         
  14.             aaa
  15.         
  16.    
  17. </body>
  19. </html>
复制代码

多个块级元素

如果一行中有两个或两个以上的块级元素，通过设置块级元素的表现范例为 inline-block 和父容器的 text-align 属性从而使多块级元素水平居中。
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         child1
  14.         child2
  15.    
  16. </body>
  18. </html>
复制代码

弹性布局

使用弹性布局，实现水平居中，其中 align-items 用于设置弹性盒子元素在主轴方向上的对齐方式。
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         child
  14.    
  15. </body>
  17. </html>
复制代码

优点

实用于恣意个元素
缺点

PC 端兼容性欠好
固定宽度-外边距偏移

先相对于父元素向右偏离半个父元素宽度，然后使用负左外边距校正居中元素的偏移量
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         
  14.             child
  15.         
  16.    
  17. </body>
  19. </html>
复制代码

优点



  • 兼容性好
  • 不管块级还是行内元素都可以实现
缺点



  • 脱离文档流
  • 使用 margin-left 必要知道宽度值
未知宽度-外边距偏移

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         
  14.             child
  15.         
  16.    
  17. </body>
  19. </html>
复制代码

垂直居中

内联元素

可以使用行高属性line-height
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         child
  14.    
  15. </body>
  17. </html>
复制代码

多行元素

表格布局

使用表格布局的 vertical-align: middle 可以实现子元素的垂直居中。
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         child1
  14.         child2
  15.    
  16. </body>
  18. </html>
复制代码

弹性布局

使用弹性布局实现垂直居中，其中 flex-direction: column 定义主轴方向为纵向。
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         child1
  14.         child2
  15.    
  16. </body>
  18. </html>
复制代码

块级元素

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

当居中元素的 高度和宽度 已知时，垂直居中标题就很简单。通过 绝对定位 元素隔断顶部 50%，并设置 margin-top 向上偏移元素高度的一半，就可以实现垂直居中了。
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         child
  14.    
  15. </body>
  17. </html>
复制代码

未知高度-外边距偏移

与 块级元素-有滚动条 实现效果类似，只是对定位元素自身的偏移使用 transform 实现
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         
  14.             child
  15.         
  16.    
  17. </body>
  19. </html>
复制代码

水平垂直居中

垂直居中文本

通过设置父元素容器 text-align 实现水平居中，设置同等的高度（height）和行高（line-height）实现对子元素的垂直居中，垂直居中元素设置 vertical-align 以及 line-height 为 initial 实现子元素内部的基准线垂直居中
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         Hello world!
  14.    
  15. </body>
  17. </html>
复制代码

固定宽高元素

使用绝对定位向右向下定位至父元素宽度和高度的50%，再使用margin向上和想左偏移自身的50%
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         
  14.             child
  15.         
  16.    
  17. </body>
  19. </html>
复制代码

未知宽高元素

使用margin让自身向右向下偏移50%，使用 transform + translate 将垂直居中元素自身偏移负 50%
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         
  14.             child
  15.         
  16.    
  17. </body>
  19. </html>
复制代码

弹性布局

父元素设置为弹性布局容器，并将 justify-content 和 align-items 设置为 center 居中
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.    
  9. </head>
  11. <body>
  12.    
  13.         
  14.             弹性布局
  15.         
  16.    
  17. </body>
  19. </html>
复制代码

总结

本篇博客详细先容了居中布局的多种实现方式，涵盖了水平居中、垂直居中以及水平垂直居中的场景，并提供了实用的示例代码。无论你是前端新手还是有肯定履历的开辟者，把握这些居中布局的本领都将对你在前端开辟中有所裨益。盼望通过本篇博客，你可以或许更好地明白和运用居中布局，提拔本身的前端技能，构建更雅观、专业的网页。
如果你觉得这篇文章对你口试提供到资助的话，贫困关注+三连哦！

来源：https://blog.csdn.net/A_D_H_E_R_E/article/details/132039740
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

荣丽

21

主题

0

回帖

99

积分

注册会员

Rank: 2

积分
99
回复楼主 返回列表