CSS垂直水平居中

最新推荐文章于 2022-01-13 10:06:36 发布
最新推荐文章于 2022-01-13 10:06:36 发布
阅读量67 收藏
点赞数
原文链接：https://my.oschina.net/u/4191619/blog/3099337
版权

本文转载于:猿2048网站CSS垂直水平居中

通过之前总结水平居中与垂直居中的基本方法，梳理垂直水平同时居中的方法就没有那么乱了。

  • text-align：center + line-height

如下图，div2中用text-align+line-height实现单行文本水平垂直居中。

 
http___nzr2ybsda-qnssl-com_images_241288_FuEzq28KPdGJvSIs4XcKXk-YZMWw-PNG_imageMogr2_strip_thumbnail_1200x90003E_format_png.gif

也可以将div2设置为inline-block实现div垂直水平居中。

 
http___nzr2ybsda-qnssl-com_images_241288_FmJRrclrCG49RRkYxTBdWVyindP--PNG_imageMogr2_strip_thumbnail_1200x90003E_format_png.gif
  • text-align：center + vertical-align：middle

如果想让div2在div1中居中，那么需要将父元素设置text-align：center，因为居中效果只对文本内容和行内元素有效，那我们将子元素div2设置为inline-block元素，还要将父元素设置为设置为table-cell元素，vertical-align：middle，

 
http___nzr2ybsda-qnssl-com_images_241288_FmDqoKR93JD5I2SPyBQdewgtqb6C-PNG_imageMogr2_strip_thumbnail_1200x90003E_format_png.gif
  • margin：0 auto+vertical-align：middle

​margin: 0 auto；在本身元素上设置，可以实现块级元素水平居中，所以将子元素设置为margin：0 auto；再还要将父元素设置为设置为table-cell元素，vertical-align：middle即可

 
http___nzr2ybsda-qnssl-com_images_241288_Fq_FB4-s1pGUIE58xK2-fmleBY7i-PNG_imageMogr2_strip_thumbnail_1200x90003E_format_png.gif
  • 绝对定位实现垂直水平居中

绝对定位元素垂直水平居中：因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值，margin为auto的前提下，只要 left 和 right 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现水平居中了。垂直居中也是如此，只要top与bottom的值也相等或者都为0就可以，这样我们的绝对定位元素就做到了垂直水平居中了。

 
nzr2ybsda-qnssl-com_images_241288_FitCkUai3obCsH_Z-yyO2mDOVl_c.gif

转载于:https://my.oschina.net/u/4191619/blog/3099337

chuluxie3918
关注
CSS 垂直水平居中的5种最佳解决方案
09-24
总的来说，CSS垂直水平居中有多种方法，每种都有其适用场景。理解这些方法并熟练运用，可以帮助开发者更好地应对各种布局挑战。在实际项目中，可以根据具体需求选择最适合的方法，或者结合多种方法以达到最佳效果。
16种CSS水平垂直居中方法
热门推荐
weixin_45709829的博客
03-22 3万+
16种css水平垂直居中方法以及应用（文字、图片） 一、垂直居中 1、行内元素 基本思想：单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 2.1行内块级元素 基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央 兼容性：支持IE7 .parent::afte
CSS 垂直水平居中方法（9 种）
zy的博客
01-13 323
居中方式flex、transform、absolute 等等。也有 CSS3 的网格布局。还有::after 和 ::before 也可以实现居中。
css垂直水平居中6种方式
09-08
这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue...
CSS垂直水平居中的各种解决方法汇总 (ฅ´ω`ฅ)已阅留爪
01-08
目录 CSS水平居中 文本水平居中 单个块级元素水平居中 多个水平排列的块级元素 水平居中 多个垂直排列的块级元素 水平居中 ...CSS垂直水平居中 方法1：设置absolute和margin 方法2：设置absolute和transf
CSS解决未知高度的垂直水平居中自适应问题
09-27
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0
基于JavaScript和HTML的前端私教课程设计源码
09-24
该项目是一个基于JavaScript和HTML的前端私教课程设计源码，主要使用JavaScript语言开发。项目共包含54个文件，其中33个JavaScript文件，7个HTML文件，6个Markdown文件，4个Java文件，2个PDF文件，1个JSON文件，1个YAML文件。该课程设计旨在提供高效的前端学习资源。
嵌入式学习之光照不足报警检测电路.zip
09-24
嵌入式学习，电子信息技术
python1Python脚本 模拟登录知乎， 爬虫，操作excel，微信公众号，远程开机PGL.zip
09-24
[python1]Python脚本。模拟登录知乎， 爬虫，操作excel，微信公众号，远程开机【PGL】.zip [python1]Python脚本。模拟登录知乎， 爬虫，操作excel，微信公众号，远程开机【PGL】.zip [python1]Python脚本。模拟登录知乎， 爬虫，操作excel，微信公众号，远程开机【PGL】.zip
基于C语言的思维车载设备OTA升级模块设计源码
09-24
该项目是基于C语言的思维车载设备OTA升级模块设计源码，包含42个文件，其中包括16个头文件（.h）、15个源文件（.c）、3个JSON配置文件、1个Git忽略文件、1个主Makefile文件、1个构建目录、1个Markdown文档以及多个子目录下的Makefile文件。该模块专为思维车载设备设计，实现了一键OTA升级功能，提高了设备的维护效率和用户体验。
geopandas安装包(pip install)_geopandas-0.8.1.tar.zip
09-24
在使用Python来安装geopandas包时，由于geopandas依赖于几个其他的Python库（如GDAL, Fiona, Pyproj, Shapely等），因此安装过程可能需要一些额外的步骤。以下是一个基本的安装指南，适用于大多数用户： 使用pip安装 确保Python和pip已安装： 首先，确保你的计算机上已安装了Python和pip。pip是Python的包管理工具，用于安装和管理Python包。 安装依赖库： 由于geopandas依赖于GDAL, Fiona, Pyproj, Shapely等库，你可能需要先安装这些库。通常，你可以通过pip直接安装这些库，但有时候可能需要从其他源下载预编译的二进制包（wheel文件），特别是GDAL和Fiona，因为它们可能包含一些系统级的依赖。 bash pip install GDAL Fiona Pyproj Shapely 注意：在某些系统上，直接使用pip安装GDAL和Fiona可能会遇到问题，因为它们需要编译一些C/C++代码。如果遇到问题，你可以考虑使用conda（一个Python包、依赖和环境管理器）来安装这些库，或者从Unofficial Windows Binaries for Python Extension Packages这样的网站下载预编译的wheel文件。 安装geopandas： 在安装了所有依赖库之后，你可以使用pip来安装geopandas。 bash pip install geopandas 使用conda安装 如果你正在使用conda作为你的Python包管理器，那么安装geopandas和它的依赖可能会更简单一些。 创建一个新的conda环境（可选，但推荐）： bash conda create -n geoenv python=3.x anaconda conda activate geoenv 其中3.x是你希望使用的Python版本。 安装geopandas： 使用conda-forge频道来安装geopandas，因为它提供了许多地理空间相关的包。 bash conda install -c conda-forge geopandas 这条命令会自动安装geopandas及其所有依赖。 注意事项 如果你在安装过程中遇到任何问题，比如编译错误或依赖问题，请检查你的Python版本和pip/conda的版本是否是最新的，或者尝试在不同的环境中安装。 某些库（如GDAL）可能需要额外的系统级依赖，如地理空间库（如PROJ和GEOS）。这些依赖可能需要单独安装，具体取决于你的操作系统。 如果你在Windows上遇到问题，并且pip安装失败，尝试从Unofficial Windows Binaries for Python Extension Packages网站下载相应的wheel文件，并使用pip进行安装。 脚本示例 虽然你的问题主要是关于如何安装geopandas，但如果你想要一个Python脚本来重命名文件夹下的文件，在原始名字前面加上字符串"geopandas"，以下是一个简单的示例： python import os # 指定文件夹路径 folder_path = 'path/to/your/folder' # 遍历文件夹中的文件 for filename in os.listdir(folder_path): # 构造原始文件路径 old_file_path = os.path.join(folder_path, filename) # 构造新文件名 new_filename = 'geopandas_' + filename # 构造新文件路径 new_file_path = os.path.join(folder_path, new_filename) # 重命名文件 os.rename(old_file_path, new_file_path) print(f'Renamed "{filename}" to "{new_filename}"') 请确保将'path/to/your/folder'替换为你想要重命名文件的实际文件夹路径。
基于Java和HTML的见证成长工作演示设计源码
09-24
该项目是基于Java和HTML的见证成长工作演示设计源码，包含25个文件，具体包括14个Java源文件、3个属性文件、2个Gradle构建文件、2个YAML配置文件、1个Git忽略文件、1个Markdown文档、1个XML配置文件和1个HTML页面。适用于需要展示成长历程和工作成果的演示场景。
geopandas安装包(pip install)_geopandas-0.14.2-py3-none-any.zip
09-24
在使用Python来安装geopandas包时，由于geopandas依赖于几个其他的Python库（如GDAL, Fiona, Pyproj, Shapely等），因此安装过程可能需要一些额外的步骤。以下是一个基本的安装指南，适用于大多数用户： 使用pip安装 确保Python和pip已安装： 首先，确保你的计算机上已安装了Python和pip。pip是Python的包管理工具，用于安装和管理Python包。 安装依赖库： 由于geopandas依赖于GDAL, Fiona, Pyproj, Shapely等库，你可能需要先安装这些库。通常，你可以通过pip直接安装这些库，但有时候可能需要从其他源下载预编译的二进制包（wheel文件），特别是GDAL和Fiona，因为它们可能包含一些系统级的依赖。 bash pip install GDAL Fiona Pyproj Shapely 注意：在某些系统上，直接使用pip安装GDAL和Fiona可能会遇到问题，因为它们需要编译一些C/C++代码。如果遇到问题，你可以考虑使用conda（一个Python包、依赖和环境管理器）来安装这些库，或者从Unofficial Windows Binaries for Python Extension Packages这样的网站下载预编译的wheel文件。 安装geopandas： 在安装了所有依赖库之后，你可以使用pip来安装geopandas。 bash pip install geopandas 使用conda安装 如果你正在使用conda作为你的Python包管理器，那么安装geopandas和它的依赖可能会更简单一些。 创建一个新的conda环境（可选，但推荐）： bash conda create -n geoenv python=3.x anaconda conda activate geoenv 其中3.x是你希望使用的Python版本。 安装geopandas： 使用conda-forge频道来安装geopandas，因为它提供了许多地理空间相关的包。 bash conda install -c conda-forge geopandas 这条命令会自动安装geopandas及其所有依赖。 注意事项 如果你在安装过程中遇到任何问题，比如编译错误或依赖问题，请检查你的Python版本和pip/conda的版本是否是最新的，或者尝试在不同的环境中安装。 某些库（如GDAL）可能需要额外的系统级依赖，如地理空间库（如PROJ和GEOS）。这些依赖可能需要单独安装，具体取决于你的操作系统。 如果你在Windows上遇到问题，并且pip安装失败，尝试从Unofficial Windows Binaries for Python Extension Packages网站下载相应的wheel文件，并使用pip进行安装。 脚本示例 虽然你的问题主要是关于如何安装geopandas，但如果你想要一个Python脚本来重命名文件夹下的文件，在原始名字前面加上字符串"geopandas"，以下是一个简单的示例： python import os # 指定文件夹路径 folder_path = 'path/to/your/folder' # 遍历文件夹中的文件 for filename in os.listdir(folder_path): # 构造原始文件路径 old_file_path = os.path.join(folder_path, filename) # 构造新文件名 new_filename = 'geopandas_' + filename # 构造新文件路径 new_file_path = os.path.join(folder_path, new_filename) # 重命名文件 os.rename(old_file_path, new_file_path) print(f'Renamed "{filename}" to "{new_filename}"') 请确保将'path/to/your/folder'替换为你想要重命名文件的实际文件夹路径。
基于微信小程序云开发的租房平台设计源码
最新发布
09-24
该项目是一套基于微信小程序云开发的租房平台设计源码，采用JavaScript、微信小程序和TypeScript等技术。项目包含359个文件，包括82个JavaScript文件、65个JSON配置文件、53个WXSS样式文件、49个PNG图片文件、48个WXML布局文件、30个TypeScript文件、20个Markdown文档、6个WXS脚本文件、2个Git忽略文件和1个YML配置文件。该平台允许用户发布新房、二手房和租房信息，并通过中介机构审核发布。客户可以直接与中介或房源发布者联系。平台提供完整的后台管理系统，利用微信小程序云开发的身份鉴权功能进行用户身份验证，实现前后端的快速搭建，无需额外服务器支持。
加强版运维系统，集成工单、发布、监控、管理dns、saltstack、定时任务celery等.zip
09-24
加强版运维系统，集成工单、发布、监控、管理dns、saltstack、定时任务celery等
基于java的农产品仓库管理系统系统报告的开题报告.docx
09-24
基于java的农产品仓库管理系统系统报告的开题报告.docx
基于java的物流管理系统报告的开题报告.docx
09-24
基于java的物流管理系统报告的开题报告.docx
嵌入式学习之快速上升时间多谐振荡器.zip
09-24
嵌入式学习，电子信息技术
css 垂直水平居中
08-30
### 回答1： 使用 CSS 让元素垂直水平居中有多种方法。 使用 `position: absolute` 和 `transform: translate(-50%, -50%)...以上就是实现CSS垂直水平居中的几种常用方法，根据具体情况选择合适的方法来实现居中效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值