default
menu home
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 1272


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

captcha
Please check the captcha code
Cancel