zoukankan      html  css  js  c++  java
  • css超简单实现div页面居中【适合做弹出框】

    1.前言

    现在项目中用到弹出框的话大部分都是直接用控件的。不过有控件虽方便,但有时候会有冲突的地方。我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋值不成功。我也不知道什么问题。如果有知道原因的大神,求赐教!

    所以说一旦有不兼容的弹出框,就自己画了。画多了,就习惯了。今天就分享一个方法【但是这个方法的原理我竟然琢磨不透!】

    2.详情

    代码是这样的,一个div.point无宽高度,left:50%;top:50%;这样的话,就会在页面的正中间,然后div.pop设置了500px的宽高,居左,居上各-250px的距离。然后这个div.pop就会在页面居中了;

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            .point{position:absolute;left:50%; top:50%;}
            .pop{width:500px; height:500px; position:absolute;left:-250px; top:-250px; border:2px solid red; }
        </style>
    </head>
    <body>
        
            <div class="point">
                <div class="pop"></div>
            </div>
    
    </body>
    </html>

    然后效果图是这样的

    然后这样的话它就居中了。我一直不明白的就是,我并没有设置position:relative,那么这样的话div就应该相对于body进行绝对定位了。我这个代码中的第一个div.point确实是相对于body进行绝对定位了。那么我这第二个div的父级并没有设置positon:relative。那么它应该是不是也应该相对于body绝对定位呢。但是事实并不是这样子呢,它是相对于div.point进行了绝对定位。【虽然效果实现了,但是原理并不是特别懂,求大神赐教】

    我一直就是用这种方法做的弹出框。不过,实际应用中,最外层还得加一个div。然后这个div设置成100%宽高度,posiotn:fixed;left:0;top:0;这样的话弹出框居中了,鼠标也滚动不了。效果较真实一点;

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            .point{position:absolute;left:50%; top:50%;}
            .pop{width:500px; height:500px; position:absolute;left:-250px; top:-250px; border:2px solid red; }
        </style>
    </head>
    <body>
        <div  style="100%; height:100%;left:0;top:0; position:fixed;background:rgba(0,0,0,0.3)">
     
            <div class="point">
                <div class="pop"></div>
            </div>
        </div>
    
    
    </body>
    </html>

     实现效果如下:

    这样的话,一个居中的弹出框就实现了,在页面的正中间。不过代码实现了,原理不是特别懂,还希望各位对我进行指点一二,让我能真正明白这个理!谢了。

    3.总结

    希望这种写法能够帮助到需要的小童鞋。也希望我文中的不足不要影响到大家,如果有错误的地方,请大家告之。

    4.追加

    根据大神程序猿到攻城狮之旅 的指点。我大概领会了。我上面的代码要做一下修改.修改后如下。其实我根本不需要第一个div.point。这个div设计top:50%;left:50%后,它的左上角那个点其实就已经在页面中间了,这个时候,我只要向左向右移动想要的负像素,就可以让div往中间靠近了。这样的话,更容易理解,而且更简单。当然了,外层再加个div作为遮罩层还是很有必要的。

    <body>
        <div style="position:absolute; top:50%;left:50%; 500px; height:500px; margin-top:-250px; margin-left:-250px; border:2px solid red"></div>
    </body>
  • 相关阅读:
    Android面向切面编程(AOP)(转)
    Android性能优化
    Android 性能分析之TraceView使用(应用耗时分析)
    Lint检查选项
    Android Chromium WebView Crash
    Could not get unknown property 'assembleRelease' for project ':app' of type org.gradle.api.Project.
    Android studio gradle 无法获取 pom文件
    android 7.0 因为file://引起的FileUriExposedException异常
    Android双系统实现
    git 安装 和 基本操作
  • 原文地址:https://www.cnblogs.com/sxs161028/p/7359651.html
Copyright © 2011-2022 走看看