前端知識學習-----居中佈局的多種實現方法

水平居中的幾種實現方式

01. inline-block + text-align
上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    text-align: center;
}
.child {
    display: inline-block
}

02. table + margin
上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    display: table;
    margin：0 auto；
}

03. absolute + transform
上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);/*以自身爲參照偏移50%*/
}

04. flex + justify-content/margin
上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>
.parent {
    display: flex;
    justify-content: center;
}
或者：
.parent {
    display: flex;
}
.child {
    margin: 0 auto;
}

以上方法實現效果：

垂直居中

01. table-cell + vertical-align 主要利用table-cell的單元格特性
上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}

02. absolute + transform
上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    width: 200px;
    height: 200px;
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

03. flex + align-items
上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
}

以上代碼效果：

居中 (水平居中加垂直居中)

01. inline-block + text-align + table-cell + vertical-align
上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    height: 300px;
    width: 300px;
    background: #666;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child {
    display: inline-block;
    background: #999;
}

02. absolute + transform

上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    height: 300px;
    width: 300px;
    background: #666;
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #999;
}

03. flex + justify-content + align-items

上代碼：

<div class="parent">
        <div class="child">DEMO</div>
</div>

.parent {
    height: 300px;
    width: 300px;
    background: #666;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    background: #999;
}

以上代碼實現效果：