到底该怎么居中??

到底该怎么居中??

我电脑的分辨率为1920,能不能给个参考答案

正在回答

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

2回答

您好,红色的div设置之后,向右移动50%,那么此时红色的div应该是最左边的边处于页面居中的位置,那么在往回挪红色div的一半,那么就是呈现红色div中间部分处于页面中间部分,那么也就实现了红色div的居中。这也就是margin-left:-400px的原因。参考代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
     .test{
     width: 800px;
     height: 100px;
     background: red;
     position:fixed;
     top:0;
     left:50%;
     margin-left:-400px;
   }
   .out{
      width: 100%;
      height: 2000px;
      background-color: #abcdef;
    }
</style>
</head>
<body>
  <div class="out">
    <div class="test"></div>
  </div>
</body>
</html>

如果解决了您的问题,请采纳。祝学习愉快!

  • 雨之赞歌 提问者 #1
    可是为什么margin-left可以设置负值呢?为什么能达到偏移的效果
    2018-12-28 15:58:34
  • 好帮手慕查理 回复 提问者 雨之赞歌 #2
    您好,margin-left可以设置正值,也可以设置负值。就好比有一个需要走2000步的台阶,而你自身的长度占800个台阶,那么走到50%一半的时候,就相当于头部站在最中间的台阶,但是你的脚已经到达了1800个台阶的位置了,那么此时就不是居中了,那么我在倒着走400个台阶(margin-left就相当于这倒着走的400个台阶),那么整个人也就处于台阶的中间了。祝学习愉快!
    2018-12-28 17:18:55
提问者 雨之赞歌 2018-12-28 15:16:33

为什么设置了margin:-400px,就可以达到居中效果呢,外边距为什么可以设置负值?

  • 提问者 雨之赞歌 #1
    说错了,margin-left:-400px
    2018-12-28 15:17:00
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
PHP小白零基础入门
  • 参与学习           人
  • 提交作业       626    份
  • 解答问题       4930    个

想要学好Web后端开发的中流砥柱语言,本阶段为你轻松铺就扎实的基础,从前端网页布局的搭建到后台PHP开发,助你从零基础到掌握主流开发语言。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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