总结自己常用的几种居中方式

从这几篇文章以及自己一年的前端经验总结出来的，flex的方式有空再写。知乎 segmentfault CSDN

1.单行文本的文字垂直居中

　　如下所示，块级元素的高度已给定，如何实现这个块级元素里的文本垂直居中呢？

    <style>
        #menu {
            background-color: #888;
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="menu">首页</div>
</body>

　　答案是设置块级元素的line-height与height相等。原理是什么？读过《CSS权威指南》的应该知道，line-height是个继承属性，这里设置的line-height值被假想的行内文本元素给继承了。有时候会有单行文本居中在不同手机表现不一致的问题，那很可能是字体的原因，给font-family多设置好几个字体试一下。

    <style>
        #menu {
            background-color: #888;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div id="menu">首页</div>
</body>

2.多行文本或图片等相对于父元素垂直居中

　　如下图所示，父元素的高度已给定。

    <style>
        .outer {
            width: 200px;
            height: 200px;
            background-color: #888;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">好吃你就多吃点,好吃你就多吃点,好吃你就多吃点,好吃你就多吃点
        </div>
    </div>   
</body>

　　对父元素使用display:table-cell以及vertical-align: middle即可。

    <style>
        .outer {
            width: 200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
            background-color: #888;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">好吃你就多吃点,好吃你就多吃点,好吃你就多吃点,好吃你就多吃点
        </div>
    </div>   
</body>

3.自适应高度的垂直居中

同时水平居中，加left: 50%; transform: translate(-50%, -50%);

    <style>
        .outer {
            height: 100px;
            position: relative;
            background-color: #888;
        }
        .inner {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            好吃你就多吃点，好吃你就多吃点
        </div>
    </div>
</body>

4.固定宽度的水平居中

　　这个最简单啦，只要把左右margin设为auto即可。

    <style>
        .inner {
            /*margin: 0 auto;*/
            width: 120px;
            background-color: #888;
        }
    </style>
</head>
<body>
    <div class="inner">
        好吃你就多吃点
    </div>
</body>

反注释margin后就是如下了

5.自适应宽度的水平居中

    <style>
        /*.navbar {
            text-align: center;
        }
        .navbar ul {
            display: inline-block;
        }*/
        .navbar li {
            float: left;
        }
        .navbar li + li {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">资讯</a></li>
        </ul>
    </div>
</body>

要是子元素居中，只需要对父元素用text-align:center子元素用display:inline-block即可。text-align这个属性除了对文本有效，对行内元素也是有效的。反注释两行代码，看看效果

还有一种是通过display:table是实现的，我自己一般不用。上面的CSS代码改成如下即可

<style>
        .navbar {
            display: table;
            margin: 0 auto;
        }
        .navbar li {
            display: table-cell;
        }
        .navbar li + li {
            margin-left: 20px;
        }
    </style>