菜单 搜索
首页 前端知识 【前端｜CSS系列第4篇】面试官：你了解居中布局吗？

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

2024-04-01 10:04:28 前端知识 前端哥 992 127 我要收藏

在这里插入图片描述
欢迎来到前端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>

在这里插入图片描述

总结

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

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/4347.html
标签
居中布局
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

本地vue项目测试iframe嵌入本地页面，虽然ip相同但是端口不一样但是报错The Content Security Policy directive 'frame-ancestors' is ignored when delivered via a element vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "SecurityError: Blocked a frame with origin "http://192.168.4

2024-04-19 16:04:36

本地vue项目测试iframe嵌入本地页面，虽然ip相同但是端口不一样但是报错The Content Security Policy directive 'frame-ancestors' is ignored when delivered via a element vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "SecurityError: Blocked a frame with origin "http://192.168.4

2024-04-19 16:04:34

本地vue项目测试iframe嵌入本地页面，虽然ip相同但是端口不一样但是报错vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "SecurityError: Blocked a frame with origin "http://192.168.41.35:9528" from accessing a cross-origin frame."如何解决

2024-04-19 16:04:23

本地vue项目测试iframe嵌入本地页面，但是报错vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "SecurityError: Blocked a frame with origin "http://192.168.41.35:9528" from accessing a cross-origin frame."如何解决

2024-04-19 16:04:26

用户只点击一次菜单，vue路由已经跳转，但是在需要等待变量A变为true时再加载页面，且不能跳转到其他页面，如何实现

2024-04-19 15:04:35

vue路由已经跳转且不会再次触发跳转，但是需要等A变为true时再加载页面，且不能跳转到其他页面，如何实现

2024-04-19 15:04:45

vue路由已经跳转，但是需要等A变为true时再加载页面，且不能跳转到其他页面，如何实现

2024-04-19 15:04:10

vue路由已经跳转，但是需要等A变为true时再加载页面，如何实现

2024-04-19 15:04:30

js用Proxy怎么监听布尔值A的变化，在A变成true时调用函数B

2024-04-19 15:04:03

js用Proxy怎么监听布尔值A的变化，在A发生改变时调用函数B

2024-04-19 15:04:34

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！