#Css篇:实现一个元素水平和垂直居中实现左右固定,中间自身适应布局 左侧固定 右侧自适应

news/2024/3/4 9:33:46

实现一个元素水平和垂直居中

元素示例:

<div class="container"><div class="centered-element">居中的内容</div>
</div>
flex布局
.container {display: flex;justify-content: center;align-items: center;height: 100vh; /* 设置容器高度为视窗高度,可根据需要调整 */
}.centered-element {/* 可以根据需要添加样式 */
}
grid布局

教程:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

.container {display: grid;place-items: center;height: 100vh; /* 设置容器高度为视窗高度,可根据需要调整 */
}.centered-element {/* 可以根据需要添加样式 */
}
使用绝对定位
.container {position: relative;height: 100vh; /* 设置容器高度为视窗高度,可根据需要调整 */
}.centered-element {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/* 可以根据需要添加样式 */
}

实现左右固定,中间自身适应布局

flex布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {margin: 0;display: flex;}.left-sidebar, .right-sidebar {width: 200px;height: 100vh;background-color: #f1f1f1;}.main-content {flex: 1;padding: 20px;}</style>
</head>
<body><div class="left-sidebar">Left Sidebar</div><div class="main-content">Main Content</div><div class="right-sidebar">Right Sidebar</div>
</body>
</html>
grid布局
body {margin: 0;display: grid;grid-template-columns: 200px 1fr 200px;
}.left-sidebar, .right-sidebar {height: 100vh;background-color: #f1f1f1;
}.main-content {padding: 20px;
}

左侧固定 右侧自适应

flex布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {margin: 0;display: flex;}.left-sidebar {width: 200px;height: 100vh;background-color: #f1f1f1;}.main-content {flex: 1;padding: 20px;}</style>
</head>
<body><div class="left-sidebar">Left Sidebar</div><div class="main-content">Main Content</div>
</body>
</html>
grid布局
body {margin: 0;display: grid;grid-template-columns: 200px 1fr;
}.left-sidebar {height: 100vh;background-color: #f1f1f1;
}.main-content {padding: 20px;
}

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

相关文章

Echarts大屏可视化_03 定制柱状图

柱状图模块引入 1.找到合适的图表 在echarts中寻找与目标样式相近的图表 Examples - Apache ECharts 2. 引入柱状图 使用立即执行函数构建&#xff0c;防止变量全局污染 实例化对象 将官网中提供的option复制到代码中&#xff0c;并且构建图表 // 柱状图模块1 (function () {/…

基于机器深度学习的交通标志目标识别

在线工具推荐&#xff1a; 三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 - 3D模型预览图生成服务 智能交通系统&#xff08;ITS&#xff09;&#xff0c;包括无人驾驶车辆&#xff0c;尽管在道路…

Python 2进制按位取反

根据一checksum算法需要将一些参数按位取反 例&#xff1a;参数 13 数字13二进制为1101 [((x)) for x in str(bin(13))] [0, b, 1, 1, 0, 1] 除去0b字符串然后按位取反得到0010 [(1^int(x)) for x in str(bin(13)).replace(0b,)] [0, 0, 1, 0]然后将得到的2进制转换成十进制…

快速掌握Pyqt5的9种显示控件

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图&#xff08;Item View&#xff09; 快速弄懂Pyqt5的4种项目部件&#xff08;Item Widget&#xff09; 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…

uniapp-距离distance数字太长,截取保留前3为数字

1.需求 将接口返回的距离的字段&#xff0c;保留三位数显示。 2.实现效果 3.代码&#xff1a; 1.这是接口返回的数据&#xff1a; 2.调取接口&#xff0c;赋值前先处理每条数据的distance <view class"left">距你{{item.distance}}km</view>listFun() …

FPGA时序分析与时序约束(一)

一、为什么要进行时序分析和时序约束 PCB通过导线将具有相关电气特性的信号相连接&#xff0c;这些电气信号在PCB上进行走线传输时会产生一定的传播延时。 而FPGA内部也有着非常丰富的可配置的布线资源&#xff0c;能够让位于不同位置的逻辑资源块、时钟处理单元、BLOCK RAM、D…

Django宠物之家平台

摘 要 随着互联网的快速发展&#xff0c;利用网络的管理系统也逐渐发展起来。在线管理模式快速融入了众多用户的眼球&#xff0c;从而产生了各种各样的平台管理系统。 关于本django宠物的家庭平台管理系统的设计来说&#xff0c;系统开发主要采纳Python技术、B/S框架&#xff…

Memcached最新2023年面试题,高级面试题及附答案解析

文章目录 01、Memcached是什么&#xff0c;有什么作用&#xff1f;02、Memcached的多线程是什么&#xff1f;如何使用它们&#xff1f;03、Memcached与Redis的区别&#xff1f;04、如果缓存数据在导出导入之间过期了&#xff0c;怎么处理这些数据呢&#xff1f;05、如何实现集群…

matlab 混沌动力学行为-分岔图-李雅普指数等

1、内容简介 略 24-可以交流、咨询、答疑 2、内容说明 混沌动力学行为-分岔图-李雅普指数等 包含各种类型的混沌模型求解&#xff0c;包含其分叉图、李雅普指数等 混沌、分叉图、李雅普指数 3、仿真分析 略 4、参考论文 略 链接&#xff1a;https://pan.baidu.com/…

【Openstack Train安装】三、openstack安装

本文在所有节点安装openstack包&#xff0c;请确保按照以下教程完成了相关配置&#xff1a; 【Openstack Train安装】一、虚拟机创建 【Openstack Train安装】二、NTP安装 安装环境如下 VMware WorkstationV17.0本机系统win11虚拟机系统CentOS 7.5 openstack包含多个版本&…

unicloud云函数url化后,客户端通过url地址向云函数发送数据流并传递到云存储中

在不久前录制过这样一门课程&#xff0c;使用uniapp生态开发API接口&#xff0c;通过这套课程&#xff0c;你不需要后后端Java、Python、PHP等后端语言&#xff0c;你只需要用前端的知识就可以构建这样一套API接口&#xff0c;而且使用uniapp生态开发接口更简单高效&#xff0c…

Windows安装Mysql Workbench及常用操作

Mysql Workbench是mysql自带的可视化操作界面&#xff0c;功能是强大的&#xff0c;但界面和navicat比&#xff0c;就是觉得别扭&#xff0c;但其实用惯了也还好&#xff0c;各有特色吧。这里记录一下常用的操作。 官方手册&#xff1a;MySQL Workbench 一、安装 1. 下载 官方…

vue之mixin混入

vue之mixin混入 mixin是什么&#xff1f; 官方的解释&#xff1a; 混入 (mixin) 提供了一种非常灵活的方式&#xff0c;来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时&#xff0c;所有混入对象的选项将被“混合”进入该组件本身的…

CentOS7根分区扩容之一

Centos默认根分区50G&#xff0c;很快接近100%&#xff0c;如果你的系统使用了全部磁盘&#xff0c;文件系统是xfs&#xff0c;根分区和/home都是逻辑卷&#xff0c;那么在没有额外的磁盘增加情况下&#xff0c;可以从/home卷中切分一部分空间增加到根分区空间。 1.由于xfs格式…

【C语言学习疑难杂症】C语言中数组存储时为什么从低地址到高地址

在C语言中&#xff0c;数组的存储从低地址到高地址是有其历史原因的。这种设计主要是为了与计算机系统的内存组织方式相一致。 在计算机系统中&#xff0c;内存通常按照字节进行编址&#xff0c;地址从低到高递增。数组在内存中是连续存储的&#xff0c;因此数组的第一个元素&…

安装nessus

此处建议使用香港服务器 docker pull ramisec/nessus docker run -itd --namenessus -p 18834:8834 ramisec/nessus docker exec -it nessus /bin/bash /nessus/update.sh 或下载拷贝插件包 docker cp all-2.0.tar.gz nessus:/nessus/ 更改Nessus镜像的默认密码 docker ex…

外包搞了6年,技术退步明显......

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

多多跨境:轻舟已过万重山,前路漫漫亦灿灿

文 | 螳螂观察&#xff08;TanglangFin&#xff09; 作者 | 易不二 “卖爆了&#xff0c;赶货都赶不过来”。 在刚刚过去的“黑五”&#xff0c;多多跨境的浙江帽子商家柳文海没想到&#xff0c;已经按照去年5倍销量进行备货&#xff0c;营收目标也设置为“挣一辆大G”了&am…

微信小程序 slider 翻转最大和最小值

微信小程序 slider 翻转最大和最小值 场景代码示例index.wxmlindex.jsutil.js 参考资料 场景 我想使用 slider 时最左边是 10 最右是 -10。 但是想当然的直接改成<slider min"10" max"-10" step"1" /> 并没用。 查了文档和社区也没有现成…

redis优化秒杀和消息队列

redis优化秒杀 1. 异步秒杀思路1.1 在redis存入库存和订单信息1.2 具体流程图 2. 实现2.1 总结 3. Redis的消息队列3.1 基于list实现消息队列3.2 基于PubSub实现消息队列3.3 基于stream实现消息队列3.3.1 stream的单消费模式3.3.2 stream的消费者组模式 3.4 基于stream消息队列…
最新文章