css 定位盒子的垂直水平居中

首先,将定位盒子的子盒子水平垂直居中的写法如下

 .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #66ccff;
            margin: 100px auto;
        }
        
        .son {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            background-color: bisque;
        }

此做法的白话文就是,先让子盒子距离左边50%(这是父级宽度的50%),然后再往左边移动自身盒子的一半,
也就是使用left设为50%,再margin-left减去自身宽度的一半,这样就可以达到水平居中效果,垂直效果。

但是这种做法有个问题了,万一自身宽度是3578这种数值,那俺们写的时候还要拿上计算器算算嘛..
也就是说以上这种做法老是要计算,不太妙。

这时候就轮到transform上场了
简单介绍一下transform
transform是CSS3当中的样式,语义化的意思就是变形…变形金刚的英文就是Transformers

其中transform有一个属性叫translate
transform:translate(x,y);

作用是移动x轴和y轴,然而这个transform:translate特殊就特殊再xy参数值是相对于自己宽高,而不是父级的宽高

就因为这个特性,我们要达到之前的目的,则可以这样写

.father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #66ccff;
            margin: 100px auto;
        }
        
        .son {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: bisque;
        }
宁骑(07)

宁骑(07)

一枚苦逼的少年,因家境贫寒无奈的在17岁那年走上写代码的道路..从此步入了一条万劫不复的道

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>