css实现居中的几种方式

内容快居中

方法1：通过设置边距实现居中

主要是通过计算margin上下左右距离实现

下列是html代码

    <div class="container">
           <div class="main">
            这是内容
        </div>
    </div>

下面是css代码,这里设置overflow是因为main是container的第一个孩子，防止塌陷

        .container {
            width: 400px;
            height:400px;
            background-color: skyblue;
            margin:0 auto;
            overflow: hidden;
        }

        .main {
            width:200px;
            height: 200px;
            background-color: blue;
            margin:100px auto;
        }

效果如下

方法2：通过定位实现居中

通过设置绝对定位的上下定位同时设置值，实现居中效果。

下面是html代码

    <div class="container">
        <div class="context">这是内容</div>
    </div>

下面是css代码，这是设置定位为100px，但是实际上可以设置为任意值，即使是0也可以

        .container {
            width:400px;
            height:400px;
            margin:0 auto;
            background-color:#888;
            position:relative;
        }
        .context {
            height: 30px;
            width:70px;
            background-color: blue;
            margin:auto;
            position:absolute;
            left:100px;
            right:100px;
            top:100px;
            bottom:100px;
        }

效果如下：

文字居中

文字水平居中可以通过设置text-align:center实现，垂直方向居中可以通过设置行高实现。设置行高后文字会在行高中间显示。因此只需要通过将行高设置为父容器高度就可以实现垂直居中

下面是html代码

    <div class="main">
        这是内容
    </div>

下面是css代码，通过设置行高和文字对齐方式实现居中效果

        .main {
            width:400px;
            height:400px;
            margin:auto;
            background-color:skyblue;
            text-align:center;
            line-height: 400px;
        }

效果如下：

同时存在文字和图片的居中

默认下图片和文字同时存在效果如下：

文字和图片无法对齐，并且图片下方还有小的缝隙

方法1：通过设置字体大小

设置父容器字体大小为0，在将文字使用span包围。

下面是html代码

    <div class="container">
        <span>这是文字</span> 
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0" alt="#">
    </div>

下面是css代码，先将父容器字体设置为0（不显示），再将要显示的内容使用span包围，在设置字体大小

      .container {
            background-color:skyblue;
            size:0px;
        }
        span {
            size:20px;
        }
        img {
            width:100px;
            vertical-align:middle;
        }

效果如下：

方法2：通过设置垂直align实现

默认情况下垂直方向参考的是baseline（基线），通过设置参考中部可以实现

下面是html代码

    <div class="container">
        这是文字 
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0" alt="#">
    </div>

下面是css代码

        .container {
            background-color:skyblue;
        }
        
        img {
            width:100px;
            vertical-align:middle;
        }

效果如下：

同理设置为bottom效果为：

设置为top效果为：