要设置内部盒子在外部盒子内垂直水平居中,可以有以下几种做法:
一、外部盒子与内部盒子都已知大小。
假设外部盒子为红色,大小为10em*10em;内部盒子为黄色,大小为3em*3em。在调整位置之前,盒子情况如下:
由于知道两个盒子的大小,只要设置黄盒子的位置即可,首先设置黄盒子的position为absolute,再将黄盒子向右下方偏移红盒子大小的一半,即向右偏移5em,向下偏移5em。此时盒子情况如下:
此时的黄盒还不在正中间,调用transform(-1.5em,-1.5em)将黄盒基于自身位置向左上偏移自身盒子大小的一半,效果如下:
这样子黄盒子就在红盒子的正中间,代码如下:
.out {
width: 10em;
height: 10em;
background-color: red;
}
.in {
position: absolute;
top: 5em;
left: 5em;
transform: translate(-1.5em, -1.5em);
width: 3em;
height: 3em;
background-color: yellow;
}
二、外部盒子大小未知,内部盒子大小已知。
当外部盒子大小未知时,由于不知道偏移的具体数值,只要将top和left的值变为50%即可,百分比是由父级元素的大小决定的,而父级元素的position需要设置成relative,代码如下:
.out {
position: relative;
width: 10em;
height: 10em;
background-color: red;
}
.in {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-1.5em, -1.5em);
width: 3em;
height: 3em;
background-color: yellow;
}
效果如下:
三、内外盒子大小都未知。
当两个盒子的大小都未知时,重新设置transform:translate(-50%,-50%),这段代码使得黄盒子基于自身位置向左上方偏移自身宽高的一半。代码如下:
.out {
position: relative;
width: 10em;
height: 10em;
background-color: red;
}
.in {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 3em;
height: 3em;
background-color: yellow;
}
效果如下:
四、设置外部盒子为flex布局。
将红盒子设置成flex布局页可以解决垂直水平居中的问题,只要将红盒子的display设置成flex,之后设置justify-content为center,设置align-items为center。flex具有主轴和交叉轴,内部的项目在主轴上依次排列,justify-content定义了内部的项目在主轴上应该怎样排列,当值为center代表项目在主轴上居中;align-items定义了内部的项目在交叉轴上的对齐方式,值为center时代表居中对齐。实现代码如下:
.out {
width: 10em;
height: 10em;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.in {
width: 3em;
height: 3em;
background-color: yellow;
}
效果如下: