居中布局的实现技巧

一、水平居中

想要实现水平居中，可以使用 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>

总结

以上就是实现水平居中、垂直居中、水平垂直居中的几种方法，每种方法都各有优劣，需要根据实际情况选择适合的方法。而在实际开发中，要注意的就是浏览器的兼容性，有些方法在某些浏览器中可能无法完美实现。