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

如何使用CSS实现一个水平居中和垂直居中的布局？

news 2025/12/16 20:01:13

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 水平居中布局
  • ⭐ 垂直居中布局
  • ⭐ 写在最后

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此，我们还会定期推出一些项目实战教程，让你能够将所学知识应用到实际开发中。通过实际项目的练习，你将能够更好地理解前端开发的工作流程和方法论，并培养自己解决问题和独立开发的能力。我们相信，只有不断积累和实践，才能真正掌握前端开发技术。因此，请准备好迎接挑战，勇敢地踏上这段前端入门之旅！无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅

⭐ 水平居中布局

要实现一个水平居中的布局，可以使用以下CSS和HTML结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 外层容器，设置视口高度，使其铺满整个屏幕 */.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 视口高度 */}/* 内部内容，可以是任何需要居中的元素 */.content {text-align: center; /* 水平居中文本 */}</style>
</head>
<body><div class="container"><div class="content"><h1>水平居中布局</h1><p>这是一个水平居中的布局示例。</p></div></div>
</body>
</html>

⭐ 垂直居中布局

要实现一个垂直居中的布局，可以使用以下CSS和HTML结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 外层容器，设置视口高度，使其铺满整个屏幕 */.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 视口高度 */}/* 内部内容，可以是任何需要居中的元素 */.content {text-align: center; /* 水平居中文本 */}</style>
</head>
<body><div class="container"><div class="content"><h1>垂直居中布局</h1><p>这是一个垂直居中的布局示例。</p></div></div>
</body>
</html>

这两个示例分别展示了水平居中和垂直居中的布局方法，您可以根据需要选择其中之一或结合使用，以实现水平和垂直居中的完整布局。

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏

在这里插入图片描述

相关文章：

如何使用CSS实现一个水平居中和垂直居中的布局？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 水平居中布局⭐ 垂直居中布局⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣…...

编程日记 2023/8/24 8:06:22

关于css 的选择器和 css变量

css 选择器 常用的选择器 1. 后代选择器&#xff1a;也就是我们常见的空格选择器&#xff0c;选择的对象为该元素下的所有子元素 。例如&#xff0c;选择所有 元素下的 元素 div p{font-size:14px}2. 子元素选择器 ‘>’ 选择某元素下的直接子元素。例如&#xff0c;选择所…...

编程日记 2023/8/24 8:05:21

大数据技术概述(三)——编程语言的选择

文章目录 1.6编程语言的选择1.6.1java和Scala1.6.2Python1.6.3SQL 1.6编程语言的选择 大数据编程一般会使用Java、Scala和python等编程语言&#xff0c;Flink目前也支持上述3种语言。 1.6.1java和Scala Java支持多线程&#xff0c;其生态圈中可用的第三方库众多。Java虚拟机…...

编程日记 2023/8/24 8:04:21

Flutter对象状态动态监听Watcher

场景&#xff1a;当一个表单需要在表单全部或者特定项赋值后才会让提交按钮可点击。 1.普通实现方式&#xff1a; ///场景&#xff1a;检查[test11][test12][test13]均不为空时做一些事情&#xff0c;例如提交按钮变成可点击String? test11;String? test12;int? test13;///当…...

编程日记 2023/8/24 8:03:20

期权分仓开户资金是否安全?具体保障措施有哪些？

网上关于期权分仓系统的真假一直都没有定论&#xff0c;两方人的争论也让很多没有接触过期权分仓系统的人摸不着头脑&#xff0c;那么期权分仓靠谱吗&#xff1f;资金在里面安全吗&#xff1f;下文为大家科普期权分仓开户资金是否安全?具体保障措施有哪些&#xff1f; 一、期权…...

编程日记 2023/8/24 8:02:19

Unity Mac踩坑日记

1、读取外部文件夹使用IO&#xff0c;读取StreamingAsset或者Unity定义文件夹或者服务器文件使用www或者UnityRequest 2、mac下使用www 需要添加前缀&#xff1a;"file://" 3、Mac下的Rider很好用&#xff0c;断点调试也很方便 4、改变文件编码格式&#xff0c;使…...

编程日记 2023/8/24 8:01:18

什么是负载均衡

前提概述 关于负载均衡&#xff0c;我会从四个方面去说 1. 负载均衡产生的背景 2. 负载均衡的实现技术 3. 负载均衡的作用范围 4. 负载均衡的常用算法 负载均衡的诞生背景 在互联网发展早期&#xff0c;由于用户量较少、业务需求也比较简单。对于软件应用&#xff0c;我们只需要…...

编程日记 2023/8/24 8:00:17

尽管价格走势平淡，但DeFi领域仍然非常有趣

DEX代表加密货币交易的创新&#xff0c;就在去年&#xff0c;这些去中心化、非托管平台的活动与CEX比相形见绌&#xff0c;但自那时以来&#xff0c;DEX已经迎头赶上&#xff0c;并在几个月内超越了中心化服务交易量&#xff0c;让用户能够更好地控制自己的资产和进行新类型的交…...

编程日记 2023/8/24 7:59:16

RCU安全引用计数

原文网址&#xff1a;https://lwn.net/Articles/93617 原文作者&#xff1a;Corbet 原文时间&#xff1a;2004年7月14日 内核提供了一种用于实现引用计数的简单机制kref&#xff1b;该机制是今年3月份完成的。kref机制的核心思想是&#xff0c;提供支持原子操作的计数器&…...

编程日记 2023/8/24 7:58:14

Linux 可重入、异步信号安全和线程安全

可重入函数 当一个被捕获的信号被一个进程处理时&#xff0c;进程执行的普通的指令序列会被一个信号处理器暂时地中断。它首先执行该信号处理程序中的指令。如果从信号处理程序返回&#xff08;例如没有调用exit或longjmp&#xff09;&#xff0c;则继续执行在捕获到信号时进程…...

编程日记 2023/8/24 7:57:14

WPF中手写地图控件（3）——动态加载地图图片

瓦片增加一个Loading动画 可以查看我的另一个博客WPF中自定义Loading图 从中心扩散 进行从里到外的扩散&#xff0c;方向是上左下右。如下图所示 于是我们可以定义一个拥有坐标X跟Y的集合&#xff0c;他允许这个集合&#xff0c;内部使用枚举器的MoveNext自动排序&#xf…...

编程日记 2023/8/24 7:56:12

智慧充电桩物联网方案架构

智慧充电桩物联网采用“云-管-边-端”的边缘计算物联网架构&#xff0c;融合5G、AI、Wi-Fi 6等技术&#xff0c;实现充电基础设施由数字化向智能化演进。智慧充电桩物联网方案架构设计&#xff0c;如下图所示&#xff1a; 云端&#xff1a; 物联网平台具备广泛协议的南向接入…...

编程日记 2023/8/24 7:55:10

C语言基础之——操作符（上）

本篇文章&#xff0c;我们将展开讲解C语言中的各种常用操作符&#xff0c;帮助大家更容易的解决一些运算类问题。 这里提醒一下小伙伴们&#xff0c;本章知识会大量涉及到二进制序列&#xff0c;不清楚二进制序列的小伙伴&#xff0c;可以去阅读我的另一篇文章《数据在内存中的…...

编程日记 2023/8/24 7:54:10

手写链式调用

遇到一个有趣的题目&#xff0c;做个笔记 实现一个arrange函数&#xff0c;可以进行时间和工作调度 //[> …]表示调用函数后的打印内容 //arrange(‘William’).execute(); //> William is notified //arrange(‘William’).do(‘commit’).execute(); //>William …...

编程日记 2023/8/24 7:53:08

DETRs with Collaborative Hybrid Assignments Training论文笔记

Title&#xff1a;[DETRs with Collaborative Hybrid Assignments Training Code 文章目录 1. Motivation2. one to one VS one to many3. Method&#xff08;1&#xff09;Encoder feature learning&#xff08;2&#xff09;Decoder attention learning 1. Motivation 当前…...

编程日记 2023/8/24 7:52:07

慧程HiperM3系列工业物联网、MES平台

产品链接&#xff1a;慧程产品主页...

编程日记 2023/8/24 7:51:05

SHELL 基础 入门（三） Bash 快捷键 命令执行顺序，详解通配符

目录 Bash 常用快捷键 输入输出重定向 << 用法 输出重定向 命令执行顺序 ; 分号 && || 通配符 传统通配符 &#xff1f; * [ ] [ - ] [ ^ ] 常用字符 强调 &#xff1a; { } 生成序列 Bash 常用快捷键 Ctrl A 把光…...

编程日记 2023/8/24 7:50:04

nvm安装使用教程

文章目录 下载配置安装最新稳定版 node安装指定版本查看版本切换版本删除版本 常见问题安装node后 显示拒绝访问的问题使用cnpm会报错的问题降低cnpm版本npm镜像 下载 NVM for Windows 下载地址&#xff1a;https://link.juejin.cn/?targethttps%3A%2F%2Fgithub.com%2Fcoreyb…...

编程日记 2023/8/24 7:49:03

【Android】JUnit和Espresso单元测试新手快速入门

引入依赖 android {defaultConfig {testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"}}dependencies {testImplementation junit:junit:4.13.2androidTestImplementation androidx.test.ext:junit:1.1.0androidTestImplementation androidx.tes…...

编程日记 2023/8/24 7:48:01

8.4 【C语言】通过指针引用字符串

8.4.1 字符串的引用方式 在C程序中&#xff0c;字符串是存放在字符数组中的。想引用一个字符串&#xff0c;可以用以下两种方法。 &#xff08;1&#xff09;用字符数组存放一个字符串&#xff0c;可以通过数组名和下标引用字符串中一个字符&#xff0c;也可以通过数组名和格…...

编程日记 2023/8/24 7:47:00

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/12/10 15:27:46

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/12/13 13:27:37

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/12/15 18:28:25

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/12/15 22:17:46

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25