zoukankan html css js c++ java

实现垂直水平居中的几种方法

1：用inline-block和vertical-align来实现居中：适用于未知宽高的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #container{
                text-align: center;
                height: 400px;
                background: #4dc71f;
            }
            #container:before{
                content: "";
                height: 100%;
                display: inline-block;
                vertical-align: middle;
                margin-right: -0.25em;
            }
            #center-div{
                display: inline-block;
                vertical-align: middle;
                background: #2aabd2;

            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="center-div">
                <img src="erweima.png" height="100" width="100">
            </div>
        </div>
    </body>
</html>

2：用相对绝对定位和负边距实现垂直水平居中：适用于宽高已知

3：利用绝对定位来实现居中：适用于宽高已知

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #container{
                text-align: center;
                height: 400px;
                background: #4dc71f;
                position: relative;
            }
            #center-div{
                position: absolute;
                margin: auto;
                top: 0;
                right: 0;
                left:0;
                bottom: 0;
                width: 200px;
                height: 200px;
                background: #2b669a;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="center-div">
                <img src="erweima.png" height="100%" width="100%">
            </div>
        </div>
    </body>
</html>

4：使用table-cell和inline-block实现居中：适用于宽高未知的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #container{
                display: table-cell;
                text-align: center;
                vertical-align: middle;
                height: 300px;
                background: #ccc;
            }
            #center-div{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="center-div">
                <img src="erweima.png" height="100" width="100">
            </div>
        </div>
    </body>
</html>

5：用CSS3中的transform来实现居中：适用于未知宽高的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #container{
             position: relative;
                height: 200px;
                background: #333;
            }
            #center-div{
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="center-div">
                <img src="erweima.png" height="100" width="100">
            </div>
        </div>
    </body>
</html>

6：用Flexbox布局来实现居中，但是要注意兼容性：适用于宽高未知的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #p_2{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 200px;
                height: 200px;
                background: #009f95;
            }
        </style>
    </head>
    <body>
        <div id="p_2">
            <div id="c_2">
                <img src="erweima.png" height="100" width="100">
            </div>
        </div>
    </body>
</html>

查看全文

相关阅读:
GARP和GVRP
VLAN间路由
 Voice VLAN
VLAN
SSH
Telnet
FTP
DHCP
STP
交换机

原文地址：https://www.cnblogs.com/moumou0213/p/6472402.html