|
仅居中元素定宽高适用 absolute + 负marginabsolute + margin autoabsolute + calc居中元素不定宽高 absolute + transformlineheightwriting-modetablecss-tableflexgrid为了实现上面的效果先来做些准备工作，假设HTML代码如下，总共两个元素，父元素和子元素
<div class="wp">
<div class="box size">123123</div>
</div>
wp是父元素的类名，box是子元素的类名，由于有定宽和不定宽的区别，size用来暗示指定宽度，下面是所有效果都要用到的公共代码，重点是设置颜色和宽高
重视：后面不在重复这段公共代码，只会给出相应提示
/* 公共代码 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
bac公斤round: green;
}
.box.size{
width: 100px;
height: 100px;
}
/* 公共代码 */
absolute + 负margin
绝对定位的百分比是相针对父元素的宽高，经过这个特性能够让子元素的居中表示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中表示
为了修正这个问题，能够借助外边距的负值，负的外边距能够让元素向相反方向定位，经过指定子元素的外边距为子元素宽度一半的负值，就能够让子元素居中了，css代码如下
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
这种方式比较好理解，兼容性亦很好，缺点是必须晓得子元素的宽高
absolute + margin auto
这种方式亦需求居中元素的宽高必要固定，HTML代码如下
<div class="wp">
<div class="box size">123123</div>
</div>
这种方式经过设置各个方向的距离都是0，此时再讲margin设为auto，就能够在各个方向上居中了
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
这种办法兼容性亦很好，缺点是必须晓得子元素的宽高
absolute + calc
这种方式亦需求居中元素的宽高必要固定，因此咱们为box增多size类，HTML代码如下
<div class="wp">
<div class="box size">123123</div>
</div>
既然top的百分比是基于元素的左上角，那样在减去宽度的一半就好了，代码如下
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
这种办法兼容性依赖calc的兼容性，缺点是必须晓得子元素的宽高
absolute + tran
| 
发表于 2024-6-30 05:33:14
