CSS 布局——全屏居中
版权声明:本⽂为博主原创⽂章,未经博主允许不得转载。 blog.csdn/Ace_Arm/article/details/81035851全屏显⽰并居中的⽅法:
代码:
效果:⼦元素,也就是红框中的内容可以⾃由增删,然⽽⼦元素依旧可以居中。<div id="parent">这是⽗元素
<div id="child">这是⼦元素</div>
</div>
----------
html, body {
margin: 0;
padding: 0;
height: 100%;
div中的div居中}
#parent {
height: 100%;
margin: 0;
border: 10px solid yellow;
}
#child {
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
transform: translate(-50%, -50%);
border: 10px solid red;
}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。