各類水平垂直居中集合（寬高未知等）

時間 2019-11-18
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        text-align:center;
    }
    .parent{
        width:400px;
        height:300px;
        margin-left: 20px;
        margin-top: 20px;
        float: left;
    }
    .num1{
        height:200px;
        width: 200px;
        margin:0 auto;
        background: black;
        opacity:0.5;
        color:white;
        line-height: 200px;
    }
    /************************************************/
    #parent0{
        background: antiquewhite;
        position: relative;
    }
    .num2{
        width:200px;
        height:100px;
        background: aqua;
        position:absolute;
        left: 50%;
        top:50%;
        margin-left:-100px;
        margin-top:-50px;
        color:blueviolet;
        line-height: 100px;
    }
    /************************************************/
    #parent1{
    position:relative;
    border:1px solid red;
    }
    .num3{
        width:200px;
        height:150px;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background:royalblue;
        line-height: 150px;
    }
    /************************************************/
    #parent2{
        position: relative;
        background: blanchedalmond;
    }
    .num4{
        width:300px;
        height:200px;
        position:absolute;
        left: 50%;
        top:50%;
        transform:translate(-50%,-50%);
        background: blueviolet;
        line-height: 200px;
    }
    /************************************************/
    #parent3{
        background: coral;
        width: 400px;
        height:400px;
        display: table-cell;
        vertical-align:middle;
        text-align: center;
    }
    /************************************************/
    #parent4{
        background: aqua;
        float: left;
    }
    .num5{
        width:200px;
        height:200px;
        background: darkkhaki;
        margin-top: calc(50% - 150px);
        margin-left: calc(50% - 100px);
        /*注意運算符先後要加一個空格*/
    }
    /************************************************/
    #parent5{
        background: cornflowerblue;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    .num6{
        width: 200px;
        height: 200px;
        background: coral;
    }
/***********************************************/
 #parent6{
            width: 600px;
            height:400px;
            box-sizing: border-box;
            border: 1px solid blue;
            text-align: center;
        }

        #parent6 p{
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        #parent6 .children{
            /*width: 400px;*/
            border: solid 1px red;
            vertical-align: middle;
            display: inline-block;
            /*display: inline;*/
            white-space: pre-wrap;
        }
</style>


<body>

<!--居中一-->
<div class="parent">
    <div class="num1">
        margin:0 auto;
    </div>
</div>

<!--居中二-->
<div id="parent0" class="parent">
    <div class="num2">
        定長寬的左右垂直居中
    </div>
</div>

<!--居中三-->
<div id="parent1" class="parent">
    <div class="num3">
        定長寬的左右垂直居中
    </div>
</div>

<!--居中四-->
<div id="parent2" class="parent">
    <div class="num4">
        定位加transform
    </div>
</div>
<div style="clear: both"></div>
<!--居中五-->
<div id="parent3" >
    <img src="img/1.jpg" alt="table-cell表格居中">
</div>

<!--居中六-->
<div id="parent4" class="parent">
    <div class="num5">
        css計算器calc
    </div>
</div>

<!--居中七-->
<div id="parent5" class="parent">
    <div class="num6">
        flex佈局實現居中
    </div>
</div>
<!--居中八-->
<div id="parent6">
    <p></p>
    <div class="children">
        增長一個空的inline-block元素，主要是父級元素的text-align: center
        （水平居中）以及子元素的vertical-align: middle（垂直居中）
        注意：children的寬度不要大於父級dom
    </div>
</div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。