CSS实现弹性盒子保持水平和垂直居中

news/2024/5/19 19:18:15/ 标签: css, 前端, css3

弹性盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>css">.outer{width: 400px;height: 400px;background-color: antiquewhite;display: flex; /*弹性盒子模型*/justify-content: center;/*水平居中*/align-items: center;/*垂直居中*/}.inner{width: 100px;height: 100px;background-color: aqua;text-align: center;/*文字水平居中*/line-height: 100px;/*文字垂直水平居中和高度保持一致*/}
</style>
<body><div class="outer"><div class="inner">1</div><div class="inner">2</div><div class="inner">3</div></div>
</body>
</html>

结果如下
在这里插入图片描述


http://www.ppmy.cn/news/1424601.html

相关文章

C语言 | Leetcode C语言题解之第32题最长有效括号

题目&#xff1a; 题解&#xff1a; int longestValidParentheses(char* s) {int n strlen(s);int left 0, right 0, maxlength 0;for (int i 0; i < n; i) {if (s[i] () {left;} else {right;}if (left right) {maxlength fmax(maxlength, 2 * right);} else if (…

MySQL慢SQL优化方案汇总

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《mysql经验总结》 &#x1f30a;山高路远&#xff0c;行路漫漫&#xff0c;终有归途 目录 写在前面 优化思路 避免查询不必要的列 分页优化 索引优化 JOIN优化 排序优化 UNION 优化 写在最后 写在前面 本…

【LeetCode热题100】【贪心算法】跳跃游戏

题目链接&#xff1a;55. 跳跃游戏 - 力扣&#xff08;LeetCode&#xff09; 数组的元素表示可以跳的最大长度&#xff0c;要判断能不能跳到最后 不断更新可以跳到的最远距离&#xff0c;如果当前的位置大于可跳最远距离&#xff0c;说明不行 class Solution { public:bool …

[python3] 字符串匹配的`多模式匹配`算法

在Python 3中&#xff0c;你可以使用第三方库ahocorasick来实现Aho-Corasick算法。Aho-Corasick算法是一种用于字符串匹配的多模式匹配算法&#xff0c;可以高效地在一个文本中搜索多个关键词。 首先&#xff0c;你需要安装ahocorasick库。你可以使用pip来进行安装&#xff1a…

「GO基础」在Windows上配置VS Code GO语言开发环境

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

# [USACO3.2] 魔板 Magic Squares

[USACO3.2] 魔板 Magic Squares 题目背景 在成功地发明了魔方之后&#xff0c;鲁比克先生发明了它的二维版本&#xff0c;称作魔板。这是一张有 8 8 8 个大小相同的格子的魔板&#xff1a; 1 2 3 4 1\quad2\quad3\quad4 1234 8 7 6 5 8\quad7\quad6\quad5 8765 题目描述 我…

Qt日志使用

QsLog使用 这篇讲qt的日志还是比较好的&#xff0c;可以在自己的函数里面配置这个日志框架实现自己所需的功能。 我接触的项目里面&#xff0c;假如有个函数功能执行错误了&#xff0c;我希望可以快速定位到这个错误&#xff0c;这个时候就需要到了日志&#xff0c;我咨询了有经…

华为OD-C卷-靠谱的车[100分]C语言-100%

题目描述 程序员小明打了一辆出租车去上班。出于职业敏感,他注意到这辆出租车的计费表有点问题,总是偏大。 出租车司机解释说他不喜欢数字4,所以改装了计费表,任何数字位置遇到数字4就直接跳过,其余功能都正常。 比如: 23再多一块钱就变为25;39再多一块钱变为50;399…

校园综合服务平台V3.9.2 源码修复大部分已知BUG

校园综合服务平台&#xff0c;版本更新至V3.9.1 &#xff0c;源码功能强大&#xff0c;ui 精美&#xff0c; 功能包含但不限于校园跑腿&#xff0c;外卖&#xff0c;组局&#xff0c;圈子&#xff0c;商城&#xff0c;抽奖&#xff0c;投票&#xff0c;团购&#xff0c;二手市场…

自然语言处理NLP:文本预处理Text Pre-Processing

大家好&#xff0c;自然语言处理(NLP)是计算机科学领域与人工智能领域中的一个重要方向&#xff0c;其研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。本文将介绍文本预处理的本质、原理、应用等内容&#xff0c;助力自然语言处理和模型的生成使用。 1.文本…

ES6的模块化

ES6模块化是JavaScript的一种组织代码的方式&#xff0c;它允许开发者将代码分割成多个独立的部分&#xff08;模块&#xff09;&#xff0c;每个模块有自己的作用域和接口&#xff0c;模块之间可以通过导入&#xff08;import&#xff09;和导出&#xff08;export&#xff09…

AI讲师人工智能讲师大模型培训讲师叶梓:突破大型语言模型推理效率的创新方法

大型语言模型&#xff08;LLM&#xff09;在自然语言处理&#xff08;NLP&#xff09;任务中展现出了前所未有的能力&#xff0c;但它们对计算资源的巨大需求限制了其在资源受限环境中的应用。SparQ Attention算法提出了一种创新的方法&#xff0c;通过减少注意力机制中的内存带…

C++初阶学习第一弹——C++入门(上)

前言&#xff1a; 很高兴&#xff0c;从今天开始&#xff0c;我们就要步入C的学习了&#xff0c;在这之前我们已经对C语言有了不错的了解&#xff0c;对数据结构也有了一些自己的认识&#xff0c;今天开始&#xff0c;我们就进入这个新的主题的学习——C 目录 一、C的发展即其特…

AI大模型之路 第二篇: Word2Vec介绍

你好&#xff0c;我是郭震 今天我来总结大模型第二篇&#xff0c;word2vec&#xff0c;它是大模型的根基&#xff0c;一切NLP都会用到它。 Word2Vec Word2Vec 是一种流行的自然语言处理&#xff08;NLP&#xff09;工具&#xff0c;它通过将词汇表中的每个单词转换成一个独特的…

探索人工智能绘图的奇妙世界

探索人工智能绘图的奇妙世界 人工智能绘图的基本原理机器之美&#xff1a;AI绘图作品AI绘图对艺术创作的影响未来展望与挑战图书推荐&#x1f449;AI绘画教程&#xff1a;Midjourney使用方法与技巧从入门到精通内容简介获取方式&#x1f449;搜索之道&#xff1a;信息素养与终身…

电脑桌面便签软件哪个好?好用的电脑桌面便签

电脑作为我们日常工作的重要工具&#xff0c;承载着大量的任务和项目。当工作任务繁重时&#xff0c;如何在电脑桌面上高效管理这些任务就显得尤为重要。这时&#xff0c;选择一款优秀的桌面便签软件&#xff0c;无疑会给我们带来极大的便利。 一款好的桌面便签软件&#xff0…

Bilstm双向长短期神经网络多输入单输出回归分析

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 BILSTM神经网络 Bilstm双向长短期神经网络多输入单输出回归分析 完整代码: Bilstm双向长短期神经网络多输入单输出回归分析.zip资源-CSDN文库 https://download.csdn.net/download/abc991835105/89087121 效果图 结果分析 展望 …

NSA发布《在数据支柱中推进零信任成熟度》报告

4月9日&#xff0c;美国国家安全局&#xff08;NSA&#xff09;发布了题为《在数据支柱中推进零信任成熟度》的报告&#xff0c;旨在于数据安全层面提供指导&#xff0c;以增强数据整体安全性并保护静态和传输中的数据。(如下图&#xff09; 一、主要内容 报告中的建议侧重于将…

flutter知识点---三棵树

在Flutter开发领域中&#xff0c;提到“三棵树”这个概念&#xff0c;通常是指构成Flutter UI构建体系的三个核心组件树&#xff1a;Widget树、Element树和RenderObject树。这三棵树相互关联、协同工作&#xff0c;共同构成了Flutter灵活、高效、高性能的UI渲染机制。下面分别对…

C#值传递和引用传递,ref和out关键字,装箱和拆箱

C#值传递和引用传递 1.值传递和引用传递 值传递&#xff1a;值传递时&#xff0c;系统首先为被调用方法的形参分配内存空间&#xff0c;并将实参的值按位置一一对应复制给形参&#xff0c;被调用方法中形参得任何改变都不会影响到相应的实参。 引用传递时&#xff1a;系统不是…