您现在的位置是:首页 > 学习笔记

div水平垂直居中的几种方法

刘锁2018-09-22人围观
简介设置元素水平垂直居中,这种问题在面试中基本都会被问到,通常情况下分为2种情况,已知元素的宽度或未知,一般网上介绍有6种方法,但是我也只用过其中4种,下面将我记录的几种简单方法列一下,以供参考
方法一:div绝对定位水平垂直居中【margin 负间距】,这种目前使用的比较多,限制是需要定义div的宽度和高度,并且内容可能会超出容器,代码如下:
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>水平垂直居中方法</title>
        <style type="text/css">
            .sys-no1{
                width:200px;
                height:200px;                
                left:50%;
                top:50%;
                position: absolute;
                margin-left:-100px;
                margin-top:-100px;
                background:blue;
            } 
        </style>
    </head>
    <body>
        <div class="sys-no1"></div>
    </body>
</html>

方法二:div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,这种方法限制是IE7及以前版本不支持,代码如下:
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>水平垂直居中方法</title>
        <style type="text/css">
            .sys-no2{
                width: 200px;
                height: 200px;
                position:absolute;
                left:0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                background: blue;
            } 
        </style>
    </head>
    <body>
        <div class="sys-no2"></div>
    </body>
</html>

方法三:transform法,这种方法IE8及以前版本不支持,代码如下:
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>水平垂直居中方法</title>
        <style type="text/css">
            .sys-no3{
                width: 50%;
                height: 20%;
                position: absolute;
                top:50%;/* 定位父级的50% */
                left: 50%;
                transform:translate(-50%, -50%);/*自己的50% */
                -webkit-transform:translate(-50%, -50%);
                -ms-transform:translate(-50%, -50%);
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="sys-no3"></div>
    </body>
</html>

方法四:flex布局法
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>水平垂直居中方法</title>
        <style type="text/css">
            .box{
                width: 100%; 
                height: 100%; 
                margin: auto; 
                display: flex; 
                align-items: center; // 垂直居中
                justify-content: center;// 水平居中
            }
            .innerbox{
                width:200px;//可以省略
                background:blue;
            }
        </style>
    </head>
    <body>
<div class="box">
    <div class="innerbox">垂直水平居中</div>
</div>
    </body>
</html>

方法五:模拟表格法(没有实际使用过)

打赏本站,你说多少就多少

文章评论

    共有条评论

    用户名:

    验证码:

本栏推荐

点击排行

  • mysql 数据库添加远程访问用户

    mysql 数据库添加远程访问用户只要mysql服务器能够连接互联网,执行后,就可以通过外网地址方式连接mysql...

  • div水平垂直居中的几种方法

    div水平垂直居中的几种方法设置元素水平垂直居中,这种问题在面试中基本都会被问到,通常情况下分为2种情况,已知元素的宽度...

  • 修改placeholder的默认颜色样式

    修改placeholder的默认颜色样式在html5中,placeholder的默认颜色是#A9A9A9,有时候我们需要改变它的默认颜色,我们只需修改一下...

  • js获取url参数

    js获取url参数以前做的一个项目,通过js跳转到新页面,新页面利用js获取url中参数,用来判断用户进入是否正确,下...

  • 安静地做着设计

    安静地做着设计自从入了这行,很多人跟我说可以做网络教程,我也有考虑,但最终没有实现,因为我觉得在这个教程泛滥...

  • 如何在网站上添加百度地图?

    如何在网站上添加百度地图?很多企业官网都有一个联系我们页面,上面显示了一些企业的联系方式、地址以及百度地图定位红点...

关注微信

    微信关注