解答
在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现。
方法一:
绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)
图片展示:
代码如下:
1 2 3 4 5 6 7 | div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); } |
方法二:
绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值
图片展示: 如方法一的图片展示
代码如下:
1 2 3 4 5 6 7 8 9 10 | div{ width:600px; height: 600px; background:red; position: absolute; left:50%; top:50%; margin-left:-300px; margin-top:-300px; <span style= "color: rgb(0, 0, 0);" >}</span> |
方法三:
绝对定位方法:绝对定位下top left right bottom 都设置0
图片展示: 如方法一的图片展示
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!--html--> <div class= "child" >我是子级</div> /**css**/ div.child{ width: 600px; height: 600px; background: red; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } |
我想问一下前端面试的时候可以自选语言嘛?平常刷题都是用的java语言…
认真看完了,浅显易懂,学习到了。
踩坑了,这道不该错的