Online notes favinavi - online bookmark

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

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

Demo

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

具体实现的css代码如下：

CSSCopy codes

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

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

htmlCopy codes

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

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

1047

favinavi - for heavy web user Online notes

最好用的网络收藏夹应该是什么样？
最好用的网络收藏夹应该是什么样？我们这里先明确一下讨论的前提，参考：什么是网络收藏夹/网络书签。这个问题恐怕每个人的答案都不尽相同。但是以favinavi的...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...
php/javascript的一些关于时间处理的函数
记录一些经常用到的时间处理函数以备用。
使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题
当使用基于Cookie-Free域名加载CSS时，字体文件无法加载的问题通常是因为浏览器政策所导致的。这个问题与字体文件资源和浏览器的同源策略有关。在Web...
纯CSS3做一个带箭头指向的漂亮的带阴影提示框
纯CSS3，不使用图片。先看下最终实现的效果图： [img] 这里以指向右侧的尖形小箭头为例，其它方向请自行修改。
一个纯CSS的最小干扰的渐变色彩虹loading bar
Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。现在流...