用transform:translate(-50%,-50%);这个方法偏移

用transform:translate(-50%,-50%);这个方法偏移

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">  

    <title>CSS布局</title>

    <style type="text/css">

        .box{

            width: 500px;

            height: 200px;

            margin:0 auto;

            border:1px solid #aaa;

            background-color: #ababab;

            color: #fff;           

            font-weight: bolder;    

            position: relative;

            

        }

        .box div{

            width: 200px;

            height: 40px;

            font-size: 16px;

            text-align: center;

            /*此处写代码*/

            position:absolute;

            top:50%;

            left:50%;

            

            transform:translate(-50%,-50%);

            

        }

    </style>

</head>

<body>

    <div class="box">

        <div>

            欢迎大家来到慕课网学习!

            来到慕课网学习!

        </div>

    </div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕夭夭 2020-03-13 18:20:17

同学你好,是想问这个方法和设置margin负边距方法哪一个好吗?

  1. 使用margin设置移动,需要知道元素的宽高,而transform:translate(-50%,-50%);是不需要知道元素宽高,因为50%计算出来的就是元素宽高的一半。假如说这个元素没有设置宽高,是内容撑开的。那么使用transform:translate(-50%,-50%);更好。

  2. 如果知道元素宽高,使用两者都一样。

  3. 代码实现正确,继续加油 ~

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

提问者 weixin_慕的地6328242 2020-03-13 14:20:42

是好否于计算margin的负边距?两者什么区别?

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师