美文网首页
css中实现元素垂直居中的实用方法,兼容ie8

css中实现元素垂直居中的实用方法,兼容ie8

作者: mudssky | 来源:发表于2020-11-03 15:36 被阅读0次

    01.已知元素宽高,50%绝对定位+负margin

    这个方法可以兼容ie5;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .container{
                position:relative;
                width:800px;
                height:800px;
                background-color:red;
            }
            .box{
                background-color: gold;
                width:200px;
                height:200px;
                position:absolute;
                left:50%;
                top:50%;
                margin-left:-100px;
                margin-top: -100px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
        </div>
    </body>
    </html> 
    

    02.未知元素宽高 margin auto

    比01法的通用性要好一些

    但是这个方法只有ie8以上能够正常显示。

    定位后使用下面两句。

    left:0;right:0;top:0;bottom:0;

    margin:auto;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .container{
                position:relative;
                width:800px;
                height:800px;
                background-color:red;
            }
            .box{
                background-color: gold;
                width:200px;
                height:200px;
                position:absolute;
                left:0;right:0;top:0;bottom:0;
                margin:auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
        </div>
    </body>
    </html> 
    

    03.flex布局

    flex属性只能在ie10以上的浏览器上使用。

    比较简单好用,这个布局方法可以兼顾移动端的适配。

    父容器添加下面几行即可。

    justify-content是容器对齐方向上的布局,默认是水平方向

    align-items是定义交叉轴上的对齐方式,当容器方向为水平row时,它调节垂直方向上的布局。

    display: flex; justify-content: center; align-items:center;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .container{
                display: flex;
                justify-content: center;
                align-items:center;
                width:800px;
                height:800px;
                background-color:red;
            }
            .box{
                background-color: gold;
                width:200px;
                height:200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
        </div>
    </body>
    </html> 
    

    相关文章

      网友评论

          本文标题:css中实现元素垂直居中的实用方法,兼容ie8

          本文链接:https://www.haomeiwen.com/subject/xttivktx.html