全部分类

php/javascript的一些关于时间处理的函数
现在还有哪些好用的网络收藏夹？
php判断浏览器是否支持avif格式图片的一种方法简洁有效地实现水平垂直双居中我的酱香之路 CSS学习笔记：flex布局做出元素两端对齐效果现在还有哪些好用的网络收藏夹？ https协议下javascript复制内容到剪贴板 mysql8开启主从同步注意事项，否则会动不动就出错停止 javascript捕获缺省的组合快捷键，比如CTRL+F 网站开发测试环境启用https，使用自签发ssl证书不是个好主意更多...
CSS

CSS背景图片分割之大图小用无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS? 使用CSS让大背景图片适应不同大小屏幕又一例一个使用CSS/HTML将图像自适应屏幕的示例网页图片CSS进阶篇——优化图片，提升网页加载速度 CSS学习笔记：flex布局做出元素两端对齐效果 CSS学习心得：多行文本两端对齐，同时溢出部分自动截断并添加省略号... MDUI前端框架，表格头position: sticky无效的问题几种CSS字体描边和阴影效果 CSS3特效“喜欢/Like”动态按钮，一颗会跳动的心脏更多...
HTML

了解onenav 无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS? 关于网页上的复选框checkbox的checked和value的问题使用CSS让大背景图片适应不同大小屏幕又一例一个使用CSS/HTML将图像自适应屏幕的示例 CSS3+SVG实现的带音效、会抖动的小铃铛图标特效 CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式 HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法 css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像） CSS实现倾斜绶带式45°标签更多...
javascript

javascript捕获缺省的组合快捷键，比如CTRL+F 关于网页上的复选框checkbox的checked和value的问题自用小工具：正则表达式测试是否能匹配字符串 CSS3+SVG实现的带音效、会抖动的小铃铛图标特效 php/javascript的一些关于时间处理的函数更全面匹配UTF-8中文汉字的正则表达式 https协议下javascript复制内容到剪贴板
PHP/Other

我的酱香之路 A PHP method for determining whether a browser supports AVIF images php判断浏览器是否支持avif格式图片的一种方法统计搜索引擎对网站地图文件或robots.txt的访问记录的一种方法网站的页面访问量以及搜索引擎爬虫访问量的统计方法网络收藏夹网站开发过程中PHP正则表达式忘记使用非贪婪模式带来的一次教训 Apache2网站安装开通https协议SSL证书 php/javascript的一些关于时间处理的函数更全面匹配UTF-8中文汉字的正则表达式 Ubuntu 22.04 live server更换亚马逊AWS的更新源更多...
IT

家用服务器proxmox 7.3开启samba共享目录你的网站会有不请自来的访客吗？网站开发测试环境启用https，使用自签发ssl证书不是个好主意搭建家庭用服务器全套攻略，300元一台小主机全部搞定 mysql8开启主从同步注意事项，否则会动不动就出错停止使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题 Applebot是什么？ win11安装跳过TPM2.0和安全启动检查的方法网络收藏夹的正确打开方式是怎样的？ favinavi网络收藏夹Ver 2.0开发笔记之更精细适配各类屏幕更多...

在线笔记 favinavi - 人性化网络收藏夹

简洁有效地实现水平垂直双居中

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-06-24 16:41(UTC)

演示

同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。

具体实现的css代码如下：

CSS复制代码

body{
	background: #fcc;
}
.hvcc{
	position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);
	background:#f00;color:#fff;/*演示时突出醒目效果*/
}

需要注意，此时父容器需要具有“position: relative;"属性。

html复制代码

<div class='hvcc'>水平、垂直都居中</div>

出于演示需要，代码只能放在iframe中运行，所以看不出来滚动页面时的固定位置效果。真实页面中红块的位置应该是固定的，即使拖动滚动条也不变，比较适合做带遮罩的弹窗效果使用。

1812

favinavi - 重度网络用户必备在线笔记

mysql8开启主从同步注意事项，否则会动不动就出错停止
默认情况下，mysql只允许本地登录，如果要开启主从同步，主机必须开启远程连接，则需要修改mysqld配置文件，以ubuntu 22.04+mysql8.0为例...
把favinavi网络收藏夹的书签搜索功能做到最好
在此先感谢“changanluan”用户的建议，是他（她）提出了这个问题，favinavi怎么还没有书签搜索功能呢？是啊，我不属于那种要收藏几千个书签的收藏...
一个纯CSS的最小干扰的渐变色彩虹loading bar
Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。现在流...
php/javascript的一些关于时间处理的函数
记录一些经常用到的时间处理函数以备用。
一个使用CSS/HTML将图像自适应屏幕的示例
在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能...
纯CSS3做一个带箭头指向的漂亮的带阴影提示框
纯CSS3，不使用图片。先看下最终实现的效果图： [img] 这里以指向右侧的尖形小箭头为例，其它方向请自行修改。

发表评论