加入收藏 | 设为首页 | 会员中心 | 我要投稿 52站长网 (https://www.52zhanzhang.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

怎么把元素居中在网页?有什么方法?

发布时间:2022-01-11 17:15:09 所属栏目:语言 来源:互联网
导读:在网页设计中,常会遇到让元素在网页居中的需求,那么怎么把元素居中在网页?有什么方法?其实实现元素居中并不难,接下来我们就一起来了解一下。 元素在浏览器窗口居中的方法 这里先给出代码块,如果有同学已经看出来点眉目可以先自己尝试一下。 position:f
  在网页设计中,常会遇到让元素在网页居中的需求,那么怎么把元素居中在网页?有什么方法?其实实现元素居中并不难,接下来我们就一起来了解一下。
 
  元素在浏览器窗口居中的方法
 
  这里先给出代码块,如果有同学已经看出来点眉目可以先自己尝试一下。
 
   position:fixed;  /*给想要居中的元素设置*/
   left:50%; /*或者right:50%*/
   top:50%; /*或者bottom:50%*/
   margin-left:-元素宽度的一半;  /*或者margin-right*/
   margin-top:-元素高度的额一半; /*或者margin-bottom*/
  好,那接下来咱们就试一试吧!
 
  <head>
      <meta charset="UTF-8">
      <style>
      /*box是在浏览器窗口居中,不是整个页面居中,这样你在上下滑动页面时,
      box元素是不动的,因此这里设置个box_compare元素能起参照作用,让它高度
      超过窗口高度,使页面出现滚动条*/
          .box_compare {
              width: 100%;
              height: 1000px;
              background: skyblue;
          }
          
          .box {
           /*给元素设置宽高*/
              width: 500px;
              height: 300px;
              background: blue;
              position: fixed;
              left: 50%; /*元素最左边离窗口左边50%的距离*/
              top: 50%; /*元素最上边离窗口顶部上边50%的距离*/
              margin-top: -150px;
              margin-left: -250px;
          }
      </style>
  </head>
 
  <body>
      <div class="box_compare"></div>
      <div class="box"></div>
  </body>
  上面的方法其实有一个弊端,即,当元素未设置宽时是不能使用的,添加了定位后的元素未设置宽度的元素宽度由内容撑开的,因此不能使用这个方法,下面给大家提供一个更简捷的方法。
 
  position: fixed; /*给想要居中的元素设置*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  这个方法可能会有同学不理解,为什么又是left: 0;right: 0;又是top: 0;bottom: 0;,这个目的是为了将它变成一个自由的元素,这时元素的宽高在未设置时默认是父元素的宽高,再使用margin: auto;就能使它在浏览器窗口居中了,否则,添加了fixed的元素使用margin: auto;是无效的。
  好,接下来我们再次尝试一下。
 
  <head>
  <meta charset="UTF-8">
   <style>
    /*box_compare和上面一样起对照作用*/
       .box_compare {
          width: 100%;
             height: 1000px;
             background: skyblue;
       }
       .box {
             width: 60%;
             height: 300px;
             background: blue;
             position: fixed;
             left: 0;right: 0;
             top: 0;bottom: 0;
             margin: auto;
        }
       </style>
  </head>
  <body>
       <div class="box_compare"></div>
       <div class="box"></div>
  </body>

(编辑:52站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读