HTML 高度不祥的情况下自动水平垂直居中

内容比较简单就不说太多废话了，我们先看下效果图，如果不是自己需要的可以直接跳过

效果图

缩放前

缩放后

html部分

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" content="text/html"><title></title>
</head>
<body>
<div><div class="layout"><div class="middle"><div class="font-layout"><div class="font-out"><div class="font-inner"><input/></div></div></div></div><div class="left"><div class="font-demo"><div class="font-out"><div class="font-inner" style="color: red">demo</div></div></div></div></div>
</div>
</body>
</html>

这部分没有什么特别的，主要关注带有'font'的div标签，我们主要看middle部分，我们可以看到在middle中有三层嵌套的div，至于为什么是三层我们继续往下看，看看css就会豁然开朗

CSS部分

        .layout {overflow: hidden;padding-left: 200px;}.middle {width: 100%;background-color: yellow;height: 200px;float: left;}.left {width: 200px;background-color: #20A0FF;height: 200px;margin-left: -100%;float: left;position: relative;left: -200px;}.font-inner {background-color: #0bb20c;width: 35%;text-align: center;margin: 0 auto;font-size: 16px;line-height: 4;}.font-out {display: table-cell;vertical-align: middle;}.font-layout {text-align: center;display: table;width: 100%;height: 100%;}.font-demo {background-color: #0c3d5d;height: 100%;width: 100%;display: table;}

这里也比较杂，我们主要关注.font-layout .font-out .font-inner三个class 。

font-layout主要做了两件事情：

1.设置了 text-align:center，是为了让其子类文字水平居中

2.设置了display:table是为了把div的性质从块级标签变为列表

font-out也是做了两件事情：

1.设置了display:table-cell 就是设置其为一个单元格子

2.设置了vertical-align有了上一步的经验这部就很好理解了，为单元格设置属性，垂直居中属性vertical-align

font-inner做了最后的两件事

1.font-align设置文字为居中

2.margin:0 auto设置左右居中

这样就可以实现水平垂直居中了

HTML 高度不祥的情况下自动水平垂直居中相关推荐

linux 谷歌浏览器debugger,解决谷歌浏览器在F12情况下自动断点问题（Paused in debugger）...
解决谷歌浏览器在F12情况下自动断点问题(Paused in debugger) 最近在使用谷歌浏览器在调试js脚本的时候,每次按F12,再刷新页面,都会跳出如上图所示的图标,自动进入断点调试.如果不 ...
FormView在什么情况下自动生成模板项?
刚才在鼓捣GridView与FormView,记得前一段时间在做时,点击gridview中的一项会在formview中显示详细的数据,而在 formview中只有编写了ItemTemplate等模板才 ...
【TensorFlow】——broadcast_to(在不复制内存的情况下自动扩张tensor)
目录作用: 内在的思路优点什么时候可以broadcast tf.boradcast_to .VS tf.tile 作用: 在不会实际意义上复制数据的情况下进行tensor的维度和形状的扩张 ...
人工智能——离线情况下自动给视频添加字幕，支持中文，英文，日文等等
文章目录前言流程安装ffmpeg 安装python包测试模型--对视频使用语音模型生成srt字幕,拖入视频播放器中将srt拖入视频,输出前言最近打开百度网盘,看到播放视频有一个AI字幕功 ...
华硕主板如何设置开机自启_华硕主板如何设定自动开机在无人的情况下自动打开...
首先要看你的主板是否支持自动开机功能,如果有的话,设置自动开机后,在无人的情况下,计算机也可以自动打开. 实现方法是设置BIOS,以AwardBIOS为例(华硕一般用这个BIOS芯片比较多): 开机后 ...
谷歌MCC经理账户是否能在预算即将耗尽的情况下自动发邮件通知
因为账户下的每个子账户有不同的运行模式,消耗的金额也不尽相同.很容易出现预算用完,没有发现的情况.那么谷歌MCC经理账户是否能在预算即将耗尽的情况下,剩余500元余额时,自动发邮件通知呢. 由于此MC ...
oracle 11g b表空间什么情况下自动增加,oracle 11g 查看表空间使用情况，表空间创建，表空间添加数据文件，修改数据文件自动增长，删除表空间...
1.查看表空间以及表空间使用情况 SELECT TABLESPACE_NAME "表空间", To_char(Round(BYTES / 1024, 2), '99990.00') ...
oracle 11g b表空间什么情况下自动增加,Oracle 11g表空间——创建和扩展(永久)表空间...
Oracle 11g表空间--创建和扩展(永久)表空间本文内容创建(永久)表空间查看表空间扩展表空间创建(永久)表空间 Oracle 按照区和段空间进行管理表空间. 区管理方式 - 针对区的 ...
Cadence OrCAD Capture复用参考设计时保持参考设计编号不变的情况下自动编号的方法

HTML 高度不祥的情况下自动水平垂直居中

效果图

html部分

CSS部分

HTML 高度不祥的情况下自动水平垂直居中相关推荐

最新文章

热门文章