css上下左右居中

如图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下左右居中</title>
    <style>
        html,body{
            margin: 0; padding: 0;
        }
        .box {            
            background: red;
            position:relative; 
             500px;
            height: 500px; 
            top: 0;
            left: 0; 
            margin: 0 auto;
           
        }
        .Center {
            background-color: yellow;     /*上下居中*/
            position: absolute;
             200px;
            height: 200px;
            top: 50%;
            margin-top: -100px;  /*height的一半
            /*左右居中*/
            left:0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            line-height:200px;
        }

    </style>    
</head>

    <div class="box">
        <div class="Center" >
            我是要居中的元素
        </div>
    </div>

</body>
</html>

第一种代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>上下左右居中</title>
    <style type="text/css">
        html,body{
            margin: 0; padding: 0; 
        }
        .box {
            position: relative;         /*这个可以去掉 看看效果哦，注意会有变化啊*/
             600px;               /*宽*/
            height: 400px;              /*高*/
            background-color: rgba(212,66,33,.86);
            margin: 0 auto;  
        }
        .Absolute-Center {
             160px;
            height: 80px;
            background-color: green;
            position: absolute; top: 0; bottom: 0; left: 0; right: 0;   /*css溢出法*/
            margin: auto;
        }
 
    </style>
</head>
<body>

    <div class="box">
        <div class="Absolute-Center" >
            我是要居中的元素
        </div>
    </div>

</body>
</html>

第二种代码展示

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>上下左右居中</title>
        <style type="text/css">
            html,
            body {
                margin: 0;
                padding: 0;
            }
            .box {
                position: relative;
                 500px;
                height: 500px;
                background: red;
                margin: 0 auto;
            }
            
            .Center {
                 200px;
                height: 200px;
                background-color: yellow;
                position: relative;
                top: 50%;
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
                margin: auto;
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>

    <body>

        <div class="box">
            <div class="Center">
                我是要居中的元素
            </div>
        </div>

    </body>

</html>

第三种代码展示