搞定垂直居中！CSS盒子的几种常用技巧
最编程
2024-01-26 07:07:59
...
盒子垂直居中的常见方法
弹性盒布局
弹性盒布局，给父元素设置flex，此时子元素变为弹性子元素。
<style>
/* 1.弹性盒布局 给父元素设置flex*/
.box {
width: 600px;
height: 600px;
border: 2px solid red;
display: flex;
/* 弹性盒子元素在主轴（横轴）方向上居中。 */
justify-content: center;
/* 弹性盒子元素在该行的侧轴（纵轴）方向上居中。 */
align-items: center;
}
/* 此时子元素变为弹性子元素 */
.box1 {
width: 120px;
height: 120px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
效果图:
table-cell实现垂直居中的方法
给父级元素添加table-cell（如果父元素使用了定位，则 vertical-align: middle垂直方向的垂直居中不发生作用）
/* 2.将父元素转变为表格， */
<style>
.box {
width: 600px;
height: 600px;
border: 2px solid red;
display: table-cell;
text-align: center;
/* 子元素的垂直对齐方式。 */
vertical-align: middle;
}
/* 子元素水平居中 */
.box1 {
width: 120px;
height: 120px;
background-color: aqua;
/* margin 水平居中 */
margin: 0 auto;
/* 转换为内联块级元素 也能实现水平居中*/
/* display: inline-block; */
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
效果图:
脱离文档流元素的居中
1.常用margin：auto 子绝父相。
/* 1.margin：auto 子绝父相*/
<style>
.box {
width: 600px;
height: 600px;
border: 2px solid red;
/* 相对定位 */
position: relative;
}
.box1 {
width: 120px;
height: 120px;
background-color: aqua;
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
效果图:
2.子元素的宽高
在已知子元素宽高的情况下
<style>
.box {
width: 600px;
height: 600px;
border: 2px solid red;
position: relative;
}
.box1 {
width: 120px;
height: 120px;
background-color: aqua;
position: absolute;
/* 定位元素的left/top等是相对于父元素的宽高的 */
top: 50%;
left: 50%;
/* 绝对定位后子元素所在位置，水平方向离水平居中多往右移动了宽度（子元素）的一半 */
/* 垂直方向离垂直居中多往下移动了高度（子元素）的一半 */
/* 已知宽高的情况下 */
margin-top: -60px;
margin-left: -60px;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
效果图：
3.transform设置盒子居中
使用transform: translate设置盒子居中。
<style>
.box {
width: 600px;
height: 600px;
border: 2px solid red;
position: relative;
}
.box1 {
width: 120px;
height: 120px;
background-color: aqua;
position: absolute;
/* 定位元素的left/top等是相对于父元素的宽高的 */
top: 50%;
left: 50%;
/* transform中的translate获取的是相对于元素本身的宽和高 ,然后进行x轴和y轴的位移*/
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
效果图：
auto自适应，只对块级元素有用，对内联元素和内联块级元素无用。