CSS中几种常用的居中方法

一.水平居中

先看html代码：

<div class="div1">
    <div class="div2">div2</div>
</div>

1.1内联元素的水平居中

使用text-align:center; CSS样式代码如下：

        .div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            text-align: center;
        }
        .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;/*声明为内联块*/
            /*display: inline;*/
            /*display: inline-table;*/
            /*display: inline-flex;*/
            /*display: inline-grid;*/
        }

其中注释的几种方式均有效果

1.2块级元素水平居中

CSS代码如下：

        .div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 0 auto;
        }

其中，只需在div2中添加margin： 0 auto；即可。

二.垂直居中

2.1单行内联元素垂直居中

html代码：

<div class="div1">
    <span>内联元素</span>
</div>

CSS代码：

        .div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            line-height: 300px;
        }

三.水平垂直居中

3.1方法一

CSS代码：

        .div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
        }

3.2方法二

使用定位加margin，CSS代码：

        .div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
        }

3.3方法三

使用定位加translate，CSS代码：

        .div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

注：使用translate要考虑各浏览器的兼容性。

先给大家介绍这几种常用的方法，更多的方法可以参考以下链接：

CSS居中方法