下面是CSS实现子元素div水平垂直居中的攻略,包含两个示例。
一、通过flex布局实现
- HTML代码
<div class="container">
<div class="child"></div>
</div>
- CSS代码
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid black;
}
.child {
width: 100px;
height: 100px;
background-color: red;
}
上述代码中,.container类设置了display: flex,justify-content: center和align-items: center这三个属性。这使得.container元素内的子元素在水平和垂直方向上都居中对齐。另外,我们还定义了一个高度值用于展示居中效果。
二、通过百分比和transform属性实现
- HTML代码
<div class="container">
<div class="child"></div>
</div>
- CSS代码
.container {
position: relative;
width: 300px;
height: 300px;
background-color: gray;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: red;
}
上述代码中,.container类设为position: relative,是为了让其内部设定的子元素.child使用position: absolute属性时,相对于.container元素的位置进行定位。
.child元素的left属性设为50%,表示在水平方向上占据.container宽度的50%的位置。然后通过使用transform软件,把元素向左移动自身宽度一半的长度。同时,同样的方式设置.top,把元素向上移动自身高度一半的长度。这样一来,.child元素就实现了在水平和垂直方向上居中对齐。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS实现子元素div水平垂直居中的示例 - Python技术站