您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

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

刘锁2018-12-04【CSS3|Html5】人已围观

简介设置元素水平垂直居中,这种问题在面试中基本都会被问到,通常情况下分为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>

Tags:css   水平垂直居中

很赞哦! ()

文章评论

站点信息