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

【CSS入门学习】Flex布局设置div水平、垂直分布与居中

news 2026/4/3 19:42:19

水平平均分布

在这里插入图片描述

<!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>.container {display: flex;justify-content: space-between;           }.item {width: 200px;height: 100px;background-color: antiquewhite;border: 1px solid;}</style>
</head>
<body><div class="container"><div class="item">左侧内容</div><div class="item">中间内容</div><div class="item">右侧内容</div></div>
</body>
</html>

一左一右

将<div class="item">中间内容</div>注释掉，只保留左右两个div：

在这里插入图片描述

还可以分别设置左右div的宽度：

在这里插入图片描述

<!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>.container {display: flex;justify-content: space-between;            }.item {width: 200px;height: 100px;background-color: antiquewhite;border: 1px solid;}.left {width: 30%;}.right {width: 60%;}</style>
</head>
<body><div class="container"><div class="item left">左侧内容</div><div class="item right">右侧内容</div></div>
</body>
</html>

水平居中

再item类中增加一条样式：

text-align: center;

则只能水平居中。

在这里插入图片描述

水平、垂直居中

使用Flex进行水平垂直居中，在item类中增加样式：

display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;

在这里插入图片描述

所以要让一个div里面的内容水平、垂直居中，可以将这个div变成flex布局，再设置justify-content和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>.container {display: flex;flex-direction: column;justify-content: space-between;       }.item {width: 200px;height: 100px;background-color: antiquewhite;border: 1px solid;}</style>
</head>
<body><div class="container"><div class="item">上侧内容</div><div class="item">中间内容</div><div class="item">下侧内容</div></div>
</body>
</html>

则效果：
在这里插入图片描述

可以为container 类增加一个高度样式：

height: 500px;

则效果：

在这里插入图片描述

再在container类增加样式，使水平居中：

align-items: center;

效果图：

在这里插入图片描述

再在item类中增加样式，使各个小div中文本水平垂直居中：

display: flex;
justify-content: center;
align-items: center;

则效果：
在这里插入图片描述

【CSS入门学习】Flex布局设置div水平、垂直分布与居中

水平平均分布 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>…...

编程日记 2025/1/28 1:49:22

9. 神经网络（一.神经元模型）

首先，先看一个简化的生物神经元结构： 生物神经元有多种类型，内部也有复杂的结构，但是可以把单个神经元简化为3部分组成： 树突：一个神经元往往有多个树突，用于接收传入的信息。轴突：…...

编程日记 2025/1/28 1:43:52

R 语言 | future 包，非阻塞的执行耗时脚本

目的：有一段代码，后面暂时用不到，但是又很耗时，占了当前R session，难道只能等半个小时，等到它结束才能画图？ 可以使用R多线程，在支线进程中执行耗时任务，同时不阻塞当前…...

编程日记 2025/1/28 1:41:31

UE学习日志#12 Niagara特效大致了解（水文，主要是花时间读了读文档和文章）

1 核心组件（官方文档阅读） 一些介绍主要来自官方文档Niagara概述 1.1 Systems 官方文档中的描述： Niagara系统是一种容器，可以放入你要构建该效果的所有内容。在这个系统中，你可以搭建不同的构建块来实现总体效果。…...

编程日记 2025/1/28 1:40:24

【数据结构】_链表经典算法OJ：合并两个有序数组

目录 1. 题目描述及链接 2. 解题思路 3. 程序 3.1 第一版 3.2 第二版 1. 题目描述及链接题目链接：21. 合并两个有序链表 - 力扣（LeetCode） 题目描述： 将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给…...

编程日记 2025/1/28 1:36:52

Mongodb副本集群为什么选择3个节点不选择4个节点

一、容错能力的定义在副本集中，容错能力是指系统能够容忍多少个节点故障而仍然能够保持服务可用性的能力。这通常与选举机制中的多数投票原则密切相关。二、三节点副本集的容错能力在三节点的副本集中，通常有一个主节点和两个从节点。当主节点故障…...

编程日记 2025/1/28 1:35:50

基于 WEB 开发的手机销售管理系统设计与实现内容

标题:基于 WEB 开发的手机销售管理系统设计与实现内容:1.摘要摘要：随着智能手机的普及和电子商务的快速发展，手机销售行业面临着越来越多的挑战和机遇。为了提高销售效率和管理水平，本文设计并实现了一个基于 WEB 的手机销售管理系统。该系…...

编程日记 2025/1/28 1:34:46

LeetCode - Google 大模型校招10题第1天 Attention 汇总 (3题)

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/145368666 GroupQueryAttention(分组查询注意力机制) 和 KVCache(键值缓存) 是大语言模型中的常见架构，GroupQueryAttention 是注意力…...

编程日记 2025/1/28 1:33:35

Vue3 provide/inject用法总结

1. 基本概念 provide/inject 是 Vue3 中实现跨层级组件通信的方案，类似于 React 的 Context。它允许父组件向其所有子孙组件注入依赖，无论层级有多深。 1.1 基本语法 // 提供方（父组件） const value ref(hello) provide(key, …...

编程日记 2025/1/28 1:30:20

Linux——网络基础（1）

文章目录目录文章目录前言一、文件传输协议应用层传输层网络层数据链路层数据接收与解封装主机与网卡数据传输过程示意二、IP和MAC地址定义与性质地址格式分配方式作用范围可见性与可获取性生活例子定义用途特点联系四、TCP和UDP协…...

编程日记 2025/1/28 1:29:01

【记录】日常｜从零散记录到博客之星Top300的成长之路

文章目录 shandianchengzi 2024 年度盘点概述写作风格简介2024年的创作内容总结 shandianchengzi 2024 年度盘点概述 2024年及2025年至今我创作了786即84篇文章，加上这篇就是85篇。很荣幸这次居然能够入选博客之星Top300，这个排名在我之前的所有年份…...

编程日记 2025/1/28 1:27:48

【二分查找】力扣373. 查找和最小的 K 对数字

给定两个以非递减顺序排列的整数数组 nums1 和 nums2 , 以及一个整数 k 。定义一对值 (u,v)，其中第一个元素来自 nums1，第二个元素来自 nums2 。请找到和最小的 k 个数对 (u1,v1), (u2,v2) … (uk,vk) 。示例 1: 输入: nums1 [1,7,11], nums2 …...

编程日记 2025/1/28 1:26:36

池化层Pooling Layer

1. 定义池化是对特征图进行的一种压缩操作，通过在一个小的局部区域内进行汇总统计，用一个值来代表这个区域的特征信息，常用于卷积神经网络（CNN）中。 2. 作用提取代表性信息的同时降低特征维度，具有平移…...

编程日记 2025/1/28 1:25:27

力扣算法题——11.盛最多水的容器

目录 💕1.题目 💕2.解析思路本题思路总览借助双指针探索规律从规律到代码实现的转化双指针的具体实现代码整体流程 💕3.代码实现 💕4.完结二十七步也能走完逆流河吗 💕1.题目 💕2.解析思路…...

编程日记 2025/1/28 1:18:52

自由学习记录（32）

文件里找到切换颜色空间 fgui中的颜色空间是一种总体使用前的设定颜色空间，和半透明混合产生的效果有差异，这种问题一般可以产生联系动效就是在fgui里可以编辑好，然后在unity中也准备了对应的调用手段，可以详细的使用每一个具…...

编程日记 2025/1/28 1:15:08

VScode+Latex (Recipe terminated with fatal error: spawn xelatex ENOENT)

使用VSCode编辑出现Recipe terminated with fatal error: spawn xelatex ENOENT问题咋办？ 很好解决，大概率的原因是因为latex没有添加到系统环境变量中，所有设置的编译工具没有办法找到才出现的这种情况。解决方法： winR 然后输…...

编程日记 2025/1/28 1:10:25

「蓝桥杯题解」蜗牛（Java）

题目链接这道题我感觉状态定义不太好想，需要一定的经验 import java.util.*; /*** 蜗牛* 状态定义：* dp[i][0]:到达(x[i],0)最小时间* dp[i][1]:到达 xi 上方的传送门最小时间*/public class Main {static Scanner in new Scanner(System.in);static f…...

编程日记 2025/1/28 1:06:58

PHP EOF (Heredoc) 详解

PHP EOF (Heredoc) 详解 PHP 中的 EOF（End Of File）是一种非常有用的语法特性，允许开发者创建多行字符串。它特别适合于创建格式化文本，如配置文件、HTML 模板等。本文将详细讲解 PHP EOF 的用法、优势以及注意事项。什么是 EOF？ EOF 是一种特殊的字符串定义方式，它允…...

编程日记 2025/1/28 1:05:34

pyautogui操控Acrobat DC pro万能PDF转Word，不丢任何PDF格式样式

为了将PDF转换脚本改为多进程异步处理，我们需要确保每个进程独立操作不同的Acrobat窗口。以下是实现步骤： 实现代码 import os import pyautogui import time import subprocess import pygetwindow as gw from multiprocessing import Pooldef conver…...

编程日记 2025/1/28 1:03:11

Day32：字符串的复制

在 Python 中，字符串的复制是指创建一个新的字符串，它的内容与原字符串相同。字符串是不可变的对象，这意味着你不能直接修改字符串的内容，但是可以通过复制来创建新的字符串进行操作。字符串的复制在一些情况下非常有用&#xff0…...

编程日记 2025/1/28 1:01:59

SimWorks FDTD仿真结果可视化：从监视器数据到专业图表，手把手教你避开插值陷阱

SimWorks FDTD仿真结果可视化：从监视器数据到专业图表，手把手教你避开插值陷阱电磁仿真工程师们常遇到这样的困境：明明仿真设置无误，计算结果却与预期存在微妙差异。问题的根源往往不在仿真过程本身，而在于后处理阶段…...

编程新知 2026/4/3 18:34:18

AI辅助开发：让快马AI成为你的编程搭档，智能生成健壮的msi安装管理类库

AI辅助开发：让快马AI成为你的编程搭档，智能生成健壮的msi安装管理类库最近在开发一个需要处理软件安装包管理的项目，其中涉及到大量.msi文件的安装、卸载和状态检查。这类操作虽然标准化程度高，但实际开发中会遇到各种边界情况和…...

编程新知 2026/4/3 16:48:32

解密Cursor Free VIP：AI编程助手无限使用实战指南

解密Cursor Free VIP：AI编程助手无限使用实战指南【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve reached your trial r…...

编程新知 2026/4/3 14:52:44

【30】软考软件设计师——UML类图与用例图满分精讲｜下午第3题常考核心

摘要：本文是《软件设计师50讲通关｜从零基础到工程师职称》专栏第30篇，聚焦模块四：应用技术（下午题）第3道高频大题，UML建模是历年下午必考核心，单题分值稳定10~12分。全文深度拆解两大核心UML图表：类图与用例图，超详细讲解类图三层结构、可见性修饰符、五大核心关系（…...

编程新知 2026/4/3 13:08:52

大模型评测、质量保证、datasets数据集等

文章目录示例代码datasetsdatasets和自建考题哪个好?常见的数据集有哪些？数据集-1. 数学与逻辑推理类 (你的主战场)数据集-2. 综合知识与学术能力类 (全能学霸)数据集-3. 编程与代码能力类 (程序员助手)数据集-4. 语言理解与指令遵循类 (听话程度)self-refine和sel…...

编程新知 2026/4/3 11:46:06

Web全栈开发学习路径规划：Phi-3-mini-gguf你的个性化导师

Web全栈开发学习路径规划：Phi-3-mini-gguf你的个性化导师 1. 为什么需要个性化学习路径学习Web全栈开发就像建造一栋房子，不同的人需要不同的施工图纸。传统学习路径往往千篇一律，忽略了学习者的基础差异和目标差异。Phi-3-mini模型通过分…...

编程新知 2026/4/3 10:23:11

Cosmos-Reason1-7B保姆级教程：WebUI响应延迟优化（FlashAttention-2启用指南）

Cosmos-Reason1-7B保姆级教程：WebUI响应延迟优化（FlashAttention-2启用指南） 1. 引言如果你已经用上了NVIDIA开源的Cosmos-Reason1-7B模型，体验过它强大的物理推理和视觉理解能力，那你可能也遇到了一个“甜蜜的烦恼…...

编程新知 2026/4/3 9:54:56

Meshroom终极指南：从照片到3D模型的免费开源解决方案

Meshroom终极指南：从照片到3D模型的免费开源解决方案【免费下载链接】Meshroom Node-based Visual Programming Toolbox 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom Meshroom是一款革命性的开源3D重建软件，能够将普通照片自动转换为…...

编程新知 2026/4/3 9:52:56

Firmwork-Common：嵌入式跨平台基础库设计与实践

1. 项目概述Firmwork-Common 是 Firmwork 嵌入式固件生态体系中的全局基础库（Global Common Library），其核心定位并非提供特定外设驱动或协议栈，而是为整个 Firmwork 生态下的所有模块、中间件及应用层代码提供统一、稳定、可移植…...

编程新知 2026/4/3 9:38:52

后端实战案例：企业级框架设计与优化实践

一、前言在 2026 年的软件开发中，Java 已经成为每一位工程师必须掌握的技能。无论是构建高性能后端服务、开发响应式前端界面，还是维护生产级服务器集群，这项技术都在其中扮演着关键角色。很多开发者在入门阶段会遇到一个普遍问题&#xff1a…...

编程新知 2026/4/3 8:47:27

水平平均分布

一左一右

水平居中

水平、垂直居中

垂直平均分布

相关文章：