default
menu home
arrow_drop_down
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

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

style分类标签： 全部 CSS html javascript php/other IT
by: fanshome  2023-06-24 16:41(UTC)
演 示

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

具体实现的css代码如下：

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

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

htmlcontent_copy复制代码
<div class='hvcc'>水平、垂直都居中</div>

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

visibility 1769

- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消