网站建设网| 网络运营| 网站建设技术| 网站建设教程| html及CSS教程|

如何利用定位使元素居中(web端页面布局小技巧)分析

人浏览  发布时间:2020-06-07

这篇文章主要介绍了如何利用定位使元素居中(web端页面布局小技巧),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编...
这篇文章主要介绍了如何利用定位使元素居中(web端页面布局小技巧),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

元素在浏览器窗口居中的方法

这里先给出代码块,如果有同学已经看出来点眉目可以先自己尝试一下。

 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>
上面这个方法在写web端页面时应用很广,同学们要多多练习哈!学会了使元素在浏览器窗口居中的方法后,那么如何使元素在父元素内居中呢?同学们可以自己思考一下,下期我再给大家介绍!

(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图