default
menu home
arrow_drop_down
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags： All CSS html javascript php/other IT
by: fanshome  2023-06-24 16:41(UTC)
Demo

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

具体实现的css代码如下：

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

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

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

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

visibility 1813

- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel