居中布局的實現技巧

一、水平居中

想要實現水平居中，可以使用 text-align 屬性，但是必須要注意的是，這個屬性只對塊級元素生效。也就是說，如果你想要讓行內元素水平居中，必須要先將其轉化為塊級元素，方法有兩種：

1、使用 display:inline-block 將行內元素轉化為塊級元素；

    <style>
        .inline-div{
            display:inline-block;
            text-align:center;
        }
    </style>
    <div class='inline-div'>水平居中的文本</div>

2、直接使用標籤 div 將行內元素包裹起來：

    <style>
        .outer{
            text-align:center;
        }
        .inner{
            display:inline;
        }
    </style>
    <div class='outer'>
        <div class='inner'>水平居中的文本</div>
    </div>

二、垂直居中

想要實現垂直居中，有很多方法：

1、使用 padding

首先是使用 padding 的方式，在高度固定的情況下，可以通過設置元素的上下 padding 相等來實現垂直居中。

    <style>
        .box{
            width:200px;
            height:200px;
            background-color:#f5f5f5;
            padding-top:calc(50% - 20px);
            padding-bottom:calc(50% - 20px);
        }
    </style>
    <div class='box'></div>

2、使用 flexbox

使用最廣泛的方式就是使用 flexbox，只需要將其父元素的 display 屬性設置為 flex，再將 align-items 和 justify-content 屬性都設置為 center 即可實現水平垂直居中。

    <style>
        .container{
            display:flex;
            align-items:center;
            justify-content:center;
        }
    </style>
    <div class='container'>
        <p>垂直居中的文本</p>
    </div>

3、使用 position 和 transform

還可以通過絕對定位和 transform 屬性來實現垂直居中，這個方法需要知道元素的寬度和高度。

    <style>
        .box{
            width:200px;
            height:200px;
            background-color:#f5f5f5;
            position:relative;
        }
        .center{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
    </style>
    <div class='box'>
        <p class='center'>垂直居中的文本</p>
    </div>

三、水平垂直居中

最後再來看一下如何實現水平垂直居中，使用方法同樣是 flexbox，只需要將其父元素的 display 屬性設置為 flex，再將 align-items 和 justify-content 屬性都設置為 center 即可。

    <style>
        .container{
            display:flex;
            align-items:center;
            justify-content:center;
            width:400px;
            height:400px;
            background-color:#f5f5f5;
        }
    </style>
    <div class='container'>
        <p>水平垂直居中的文本</p>
    </div>

總結

以上就是實現水平居中、垂直居中、水平垂直居中的幾種方法，每種方法都各有優劣，需要根據實際情況選擇適合的方法。而在實際開發中，要注意的就是瀏覽器的兼容性，有些方法在某些瀏覽器中可能無法完美實現。