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

居中面试问题

news 2026/3/30 17:26:22

前端常问居中面试问题

css文本居中

文本水平居中

<div class="father"><div class="child"><div>
<div>

子类元素为行内元素，则给父类元素定义text-align:center

如果子元素是块元素，则给子元素定义margin：0 auto；

如果子元素是块级元素，可以通过display将子元素定义成行内元素，在给子元素定义text-align:center

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;}.child {display: block;text-align: center;background-color: orange;}</style>
</head>
<body><div class="father"><span class="child">我是一棵小小小小草奥</span></div>
</body>
</html>

在这里插入图片描述

如果margin：0 auto；加在父元素上，则父元素相对与body水平居中。text-align是作用于自身

文本垂直居中

<div>hello word </div>

例如这个高为100px，让文本居中你需要两个条件

div {vertical-align:middledisplay:table-cell;
}

这里display必须是table-cell

是table-cell会控制这个盒子的宽度为里面text的宽度，并不是真正可以设置宽高

另一种方法是，对单行文本的垂直居中可以将行高line-height设置为盒子的高度

给盒子做居中

盒子水平居中

margin：auto

盒子垂直居中，不能用margin，可以用定位或者flex布局实现或者浮动

用定位实现常见的父子盒子都是块元素的情况
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;position: relative;}.child {width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50%,-50%);position: absolute;background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;position: relative;//父元素开启相对定位}.child {width: 200px;height: 200px;top: 0;left: 0;right: 0;bottom: 0;margin: auto; //居中关键就是外边距为autoposition: absolute; //子元素开启固定定位background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>

方式不一样但是呈现的样式是一样的

在这里插入图片描述

弹性盒子居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;display: flex; //这里必须要开启弹性盒子justify-content: center; //水平居中align-items: center;//垂直居中background-color: skyblue;}.child {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>

在这里插入图片描述

相关文章：

居中面试问题

前端常问居中面试问题 css文本居中 文本水平居中 <div class"father"><div class"child"><div> <div>子类元素为行内元素&#xff0c;则给父类元素定义text-align:center 如果子元素是块元素&#xff0c;则给子元素定义margin&…...

编程日记 2024/1/14 21:08:48

网页设计-用户体验

Use Cases (用例) 用例是用户如何在网站上执行任务的书面描述&#xff0c;从用户的角度描述了系统响应请求时的行为。每个用例都是用户实现目标的一系列简单的步骤。简言之&#xff0c;用例是一种用于描述系统如何满足用户需求的方法。 用例的好处 1. 明确需求&#xff1a; Use…...

编程日记 2024/1/14 21:07:48

docker应用：vocechat

简介&#xff1a;VoceChat是一款超轻量级的Rust聊天应用程序、API和SDK&#xff0c;优先考虑私人托管。使用VoceChat建立您自己的聊天功能&#xff01;作为一款非常好用的通讯应用程序&#xff0c;它可以让你与朋友、家人和同事进行即时消息聊天&#xff0c;支持图片视频的分享…...

编程日记 2024/1/14 21:05:46

linux 02 vmware的快照，文件管理

01.快照 使用快照&#xff1a; 同时的快照管理器&#xff1a; 如果想要返回快照&#xff0c;选择要选择的快照&#xff0c;跳转 02. 文件管理&#xff1a; cd 修改当前路径 02.touch 创建文件 03. mkdir 创建文件夹 mkdir -p 文件夹 &#xff08;创建之前没有的上级文件…...

编程日记 2024/1/14 21:03:45

项目架构之Zabbix部署

1 项目架构 1.1 项目架构的组成 业务架构&#xff1a;客户端 → 防火墙 → 负载均衡&#xff08;四层、七层&#xff09; → web缓存/应用 → 业务逻辑&#xff08;动态应用&#xff09; → 数据缓存 → 数据持久层 运维架构&#xff1a;运维客户端 → 跳板机/堡垒机&#x…...

编程日记 2024/1/14 21:02:44

RocketMQ源码阅读-Message消息存储

RocketMQ源码阅读-Message消息存储 1. CommitLog的作用2. CommitLog 存储消息3. 时序图4. 小结 在Broker消息接收一篇中&#xff0c;分析到Broker接收到消息&#xff0c;最终会调用CommitLong#putMessage方法存储消息。 本篇来分析CommitLong#putMessage存储消息的流程。 1. C…...

编程日记 2024/1/14 21:01:43

《C语言学习》---郝斌版---笔记

简介 学习计算机&#xff0c;离不开C语言的学习&#xff0c;而C语言学习过程中的视频课教程&#xff0c;目前来说&#xff0c;如果郝斌老师的C语言排第二&#xff0c;没有人敢排第一 郝斌老师的C语言教程&#xff0c;通俗易懂&#xff0c;引人发思&#xff0c;特别适合新手入门…...

编程日记 2024/1/14 21:00:43

Python(32):字符串转换成列表或元组，列表转换成字典小例子

1、python 两个列表转换成字典 字符串转换成列表 列表转换成字典 column "ID,aes,sm4,sm4_a,email,phone,ssn,military,passport,intelssn,intelpassport,intelmilitary,intelganghui,inteltaitonei,credit_card_short,credit_card_long,job,sm4_cbc,sm4_a_cbc" …...

编程日记 2024/1/14 20:59:42

CentOS 7 安装私有平台OpenNebula

目录 一、配置yum源 二、配置数据库MySQL 2.1 安装MySQL 2.2 修改MySQL密码 2.3 创建项目用户和库 三、安装配置前端包 四、设置oneadmin账号密码 五、验证安装 5.1 命令行验证安装 5.2 数据存放位置 5.3 端口介绍 5.4 命令介绍 六、访问 6.1 设置语言 6.2 创建主…...

编程日记 2024/1/14 20:58:41

（aiohttp-asyncio-FFmpeg-Docker-SRS）实现异步摄像头转码服务器

1. 背景介绍 在先前的博客文章中&#xff0c;我们已经搭建了一个基于SRS的流媒体服务器。现在&#xff0c;我们希望通过Web接口来控制这个服务器的行为&#xff0c;特别是对于正在进行的 RTSP 转码任务的管理。这将使我们能够在不停止整个服务器的情况下&#xff0c;动态地启动…...

编程日记 2024/1/14 20:57:40

基于STM32微控制器的四轮智能小车控制系统设计

标题&#xff1a;基于STM32微控制器的四轮智能小车控制系统设计与实现 摘要&#xff1a; 本文针对移动机器人领域的应用需求&#xff0c;详细介绍了基于STM32系列单片机&#xff08;以STM32F103C8T6为例&#xff09;为核心的四轮小车控制系统的设计和实现过程。该系统集成了电…...

编程日记 2024/1/14 20:56:39

JPA的复杂查询包括一对多多对一和多对多的查询

1. 多表关联查询和排序 假设我们有两个实体类&#xff1a;Customer和Order&#xff0c;它们之间是一对多的关系&#xff0c;即一个客户可以有多个订单。我们想要查询某个客户的所有订单&#xff0c;并按订单金额进行降序排序。 Entity Table(name "customers") pu…...

编程日记 2024/1/14 20:54:35

电脑文件mfc100u.dll丢失的解决方法分析，怎么修复mfc100u.dll靠谱

mfc100u.dll丢失了要怎么办&#xff1f;其实很多人都遇到过这样的电脑故障吧&#xff0c;说这个mfc100u.dll文件已经不见了&#xff0c;然后一些程序打不开了&#xff0c;那么这种情况我们要怎么解决呢&#xff1f;今天我们就来给大家详细的说说mfc100u.dll丢失的解决方法。 一…...

编程日记 2024/1/14 20:53:34

从DETR到Mask2former(2): 损失函数loss function

DETR的损失函数包括几个部分&#xff0c;如果只看论文或者代码&#xff0c;比较难理解&#xff0c;最好是可以打断点调试&#xff0c;对照着论文看。但是现在DETR模型都已经被集成进各种框架中&#xff0c;很难进入内部打断掉调试。与此同时&#xff0c;数据的label的前处理也比…...

编程日记 2024/1/14 20:52:34

Java21 + SpringBoot3集成WebSocket

文章目录 前言相关技术简介什么是WebSocketWebSocket的原理WebSocket与HTTP协议的关系WebSocket优点WebSocket应用场景 实现方式1. 添加maven依赖2. 添加WebSocket配置类&#xff0c;定义ServerEndpointExporter Bean3. 定义WebSocket Endpoint4. 前端创建WebSocket对象 总结 前…...

编程日记 2024/1/14 20:51:33

鲸鱼优化算法WOA改进预告

鲸鱼优化算法&#xff08;Whale Optimization Algorithm&#xff0c;WOA&#xff09;是一种基于自然界中鲸鱼群体行为的启发式优化算法。这个算法模拟了鲸鱼的觅食行为和社会行为&#xff0c;通过模拟这些行为来解决优化问题。 以下是鲸鱼优化算法的一些关键特点和步骤&#x…...

编程日记 2024/1/14 20:47:30

Nightingale 夜莺监控系统 - 告警篇（3）

Author&#xff1a;rab 官方文档&#xff1a;https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v6/usage/alert/alert-rule/ 目录 前言一、配置1.1 创建钉钉机器人1.2 n9e 创建通知用户1.3 n9e 创建团队&#xff08;组&#xff09;1.4 将通知用户添加团队1.…...

编程日记 2024/1/14 20:46:29

【LeetCode2696】删除子串后的字符串最小长度

1、题目描述 【题目链接】 标签&#xff1a;栈 、字符串、模拟 难度&#xff1a;简单 给你一个仅由 大写 英文字符组成的字符串 s 。 你可以对此字符串执行一些操作&#xff0c;在每一步操作中&#xff0c;你可以从 s 中删除 任一个 “AB” 或 “CD” 子字符串。 通过执行操作…...

编程日记 2024/1/14 20:44:27

VMware安装CentOS7虚拟机

VMware 安装 获取 VMware 安装包 下载地址&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1ELR5NZa7rO6YVplZ1IUigw?pwdplz3 提取码&#xff1a;plz3 包括&#xff1a;当然&#xff0c;也可以自己去别的地方下载&#xff0c;WMware 版本都差不多&#xff0c;现在用的比…...

编程日记 2024/1/14 20:39:23

Linux第22步_安装CH340驱动和串口终端软件MobaXterm

开发板输出信息通常是采用串口&#xff0c;而计算机通常是USB接口&#xff0c;为了让他们之间能够交换数据&#xff0c;我们通常采用USB转串口的转换器来实现。目前市场上的串口转换器大多是采用CH340芯片来实现的&#xff0c;因此我们需要在计算中安装一个CH340驱动程序&#…...

编程日记 2024/1/14 20:38:23

ParrelSync自定义参数功能：打造专属多人游戏测试环境的终极指南

ParrelSync自定义参数功能&#xff1a;打造专属多人游戏测试环境的终极指南 【免费下载链接】ParrelSync (Unity3D) Test multiplayer without building 项目地址: https://gitcode.com/gh_mirrors/pa/ParrelSync ParrelSync是一款专为Unity3D开发者设计的高效多人游戏测…...

编程新知 2026/3/30 15:44:52

Nunchaku FLUX.1-dev 提示词工程入门：编写高质量Prompt的实用技巧与范例

Nunchaku FLUX.1-dev 提示词工程入门&#xff1a;编写高质量Prompt的实用技巧与范例 你是不是也遇到过这种情况&#xff1a;用同一个开源大模型&#xff0c;别人生成的图片精美绝伦&#xff0c;自己生成的却总差点意思&#xff0c;要么主体不对&#xff0c;要么风格跑偏&#…...

编程新知 2026/3/30 13:57:25

Vivado+Vitis双剑合璧：从零构建Zynq-7020的SD卡Linux系统启动镜像

VivadoVitis双剑合璧&#xff1a;从零构建Zynq-7020的SD卡Linux系统启动镜像 在嵌入式系统开发领域&#xff0c;Xilinx Zynq系列SoC凭借其独特的ARM处理器与FPGA可编程逻辑的完美结合&#xff0c;成为众多高性能嵌入式应用的理想选择。本文将带领开发者深入探索如何利用Vivado和…...

编程新知 2026/3/30 13:31:01

foobox-cn：foobar2000现代化DUI皮肤配置的终极音乐管理方案

foobox-cn&#xff1a;foobar2000现代化DUI皮肤配置的终极音乐管理方案 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn foobox-cn是为foobar2000播放器设计的现代化默认用户界面&#xff08;DUI&…...

编程新知 2026/3/30 13:22:52

AI时代开发格局剧变：TypeScript在AI辅助开发中超越Python，登顶GitHub榜首

2026年3月&#xff0c;GitHub《Octoverse 2025》报告数据在技术圈彻底引爆——TypeScript首次超越Python&#xff0c;成为GitHub月活跃贡献者最多的编程语言&#xff0c;而这一历史性转折的核心推手&#xff0c;正是AI辅助开发的全面普及。这不是简单的语言热度更迭&#xff0c…...

编程新知 2026/3/30 12:40:15

宇视NVR接入AS-V1000平台全流程指南（含SDK端口配置避坑）

宇视NVR对接AS-V1000平台实战手册&#xff1a;从配置到排障的深度解析 当监控系统需要整合多品牌设备时&#xff0c;宇视NVR与AS-V1000平台的对接成为典型场景。不同于标准化的协议对接&#xff0c;SDK接入方式往往隐藏着诸多"暗礁"——从端口冲突到能力集匹配&#…...

编程新知 2026/3/30 10:14:03

【Java 25向量API工业落地白皮书】：20年JVM专家亲授4大高并发场景实战代码（含SIMD加速性能实测数据）

第一章&#xff1a;Java 25向量API工业落地全景概览Java 25正式将Vector API&#xff08;JEP 478&#xff09;升级为标准特性&#xff0c;标志着JVM在高性能数值计算领域迈入新阶段。该API通过泛型向量类型&#xff08;如Vector<Double>&#xff09;、跨平台掩码操作与自…...

编程新知 2026/3/30 9:13:45

番茄小说下载器：一站式离线阅读与听书解决方案

番茄小说下载器&#xff1a;一站式离线阅读与听书解决方案 【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版 项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 还在为网络不稳定而无法畅快阅读番茄小说烦恼吗&#xff1f;想要在通…...

编程新知 2026/3/30 8:11:21

OpCore-Simplify高效配置实战指南：智能适配黑苹果硬件的开源工具

OpCore-Simplify高效配置实战指南&#xff1a;智能适配黑苹果硬件的开源工具 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 当你面对繁杂的黑苹果EFI…...

编程新知 2026/3/30 7:45:07

Hotkey Detective：解决Windows热键冲突的创新方法

Hotkey Detective&#xff1a;解决Windows热键冲突的创新方法 【免费下载链接】hotkey-detective A small program for investigating stolen hotkeys under Windows 8 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 问题引入&#xff1a;当你的快捷键…...

编程新知 2026/3/30 7:10:57