当前位置：首页 > news >正文

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

news 2025/9/14 13:26:27

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

在这里插入图片描述

总结

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

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

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

欢迎来到前端CSS系列的第4篇教程！如果你正在寻找一种简单而又强大的前端技术，以使你的网页和应用程序看起来更加专业和美观，那么居中布局绝对是你不能错过的重要知识。在前端开发中，实现居中布局是一项必备技能，无论…...

编程日记 2023/8/29 9:10:14

安全物理环境技术测评要求项

1.物理选择-保证等级保护对象物理安全的前提和基础 1-0/2-2/3-2/4-2（级别-要求项数量） a）具备防震、防风、防雨能力 b）避免顶层或地下室，否则应加强防水、防潮措施测评实施重点： 1）机房场地所在…...

编程日记 2023/8/29 9:09:11

SAP MTS案例教程PP生产前台操作

目录本章介绍 2 生产订单相关操作 3 批量查询生产订单 3 单个显示生产任务单 5 生产订单批量可用性检查 6 显示短缺部件信息 8 修改生产订单 9 重读工单计划主数据 11 单个下达生产订单 12 批量下达生产订单 13 非倒冲生产方式操作过程 15 多个工单批量发料 15 单个工单发料 1…...

编程日记 2023/8/29 9:08:11

Celery task 执行报错 TypeError: Object of type set is not JSON serializable 问题分析处理

情况描述： 定义了新的shared_task推送到生产环境后，发现无法执行，会报错set对象无法序列化，报错内容如下： Traceback (most recent call last):File "/tmp/venv/lib64/python3.6/site-packages/kombu/serializati…...

编程日记 2023/8/29 9:07:08

【大魔王送书第一期】《一名阿里服务端开发工程师的进阶之路》

一、前言目前，资讯、社交、游戏、消费、出行等丰富多彩的互联网应用已经渗透到了人们生活和工作的方方面面，正深刻改变着信息时代。随着用户规模的增长和应用复杂度的上升，服务端面临的技术挑战越来越严峻。在头部互联网企业，服…...

编程日记 2023/8/29 9:06:07

[FPGA IP系列] BRAM IP参数配置与使用示例

FPGA开发中使用频率非常高的两个IP就是FIFO和BRAM，上一篇文章中已经详细介绍了Vivado FIFO IP，今天我们来聊一聊BRAM IP。本文将详细介绍Vivado中BRAM IP的配置方式和使用技巧。一、BRAM IP核的配置 1、打开BRAM IP核在Vivado的IP Catalog中找到B…...

编程日记 2023/8/29 9:05:06

react ts

一、项目搭建 1、创建项目使用vite生成项目 npx create-react-app react-ts-project --template typescript 启动项目 yarn start 删除无用组件 2、设计目录结构资源说明http网络请求assets公共资源components组件router路由配置utils工具模块store状态机App.tsx应用…...

编程日记 2023/8/29 9:04:03

配置MySQL

配置MySQL_5.7.16 一级目录2.1.1 安装包准备2.1.2 安装MySQL2.1.3 配置MySQL 一级目录 2.1.1 安装包准备 1）将安装包和JDBC驱动上传到/opt/software，共计6个 01_mysql-community-common-5.7.16-1.el7.x86_64.rpm 02_mysql-community-libs-5.7.16-1.el…...

编程日记 2023/8/29 9:03:01

GFPGAN 集成Flask 接口化改造

GFPGAN是一款腾讯开源的人脸高清修复模型，基于github上提供的demo，可以简单的集成Flask以实现功能接口化。 GFPGAN的安装，Flask的安装请参见其他文章。如若使用POSTMAN进行测试，需使用POST方式，form-data的请求体&am…...

编程日记 2023/8/29 9:02:00

目录 1.emitter.JS function broadcast (componentName, eventName, params) {this.$children.forEach(child > {var name child.$options.componentNameif (name componentName) {child.$emit.apply(child, [eventName].concat(params))} else {broadcast.apply(child, …...

编程日记 2023/8/29 9:00:59

水平居中

内联元素

适用对象

优点

缺点

块级元素

多个块级元素

弹性布局

优点

缺点

固定宽度-外边距偏移

优点

缺点

未知宽度-外边距偏移

垂直居中

内联元素

多行元素

表格布局

弹性布局

块级元素

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

未知高度-外边距偏移

水平垂直居中

垂直居中文本

固定宽高元素

未知宽高元素

弹性布局

总结

相关文章：