在线笔记 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中运行，所以看不出来滚动页面时的固定位置效果。真实页面中红块的位置应该是固定的，即使拖动滚动条也不变，比较适合做带遮罩的弹窗效果使用。

1011

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

javascript捕获缺省的组合快捷键，比如CTRL+F
有时候我们需要在网页上捕获用户的按键动作，然后避免执行缺省动作，替换成我们想要执行的程序。下面我们以拦截并接管“ctrl+f”组合键为例，代码如下：
一个使用CSS/HTML将图像自适应屏幕的示例
在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能...
CSS实现倾斜绶带式45°标签
有时候页面需要在某个元素上设置一个醒目的标志，比如“审核中”、“热卖中”、“HOT”等等，此时本样式比较合适。先上图看最终效果。 [img]
现在还有哪些好用的网络收藏夹？
看到几年前有人问过这个问题，上网搜索一下，大概能找到以下几家，目前貌似都还能访问： 1、当然有这里—— favii人性化网络收藏夹，不过最近favii升级新版...
统计搜索引擎对网站地图文件或robots.txt的访问记录的一种方法
一般而言，各大搜索引擎都允许提交网站地图，例如网站根目录下的“sitemap.xml”文件，是xml格式的文本文件。当提交了网站地图后，搜索引擎蜘蛛来访时，可能...
Comparing the mobile adaptability of several Chinese web favorites
In the era of mobile phones, a website is still good to use, and whether you can...