css各种居中方式

由于前几天遇到一个很奇怪的居中情况,半天都找不到原因,所以回顾一下css对html的各种居中方式。

水平居中

我们按照display的不同来说一下他们的居中方式有哪些吧。

display: inline / inline-block

这个就很简单了

<div>
    <span>
        <!-- <div style="width:100px;float:left">haha</div> 使用浮动会影响行内元素布局-->
        水平居中啊
    </span>
</div>

这样span元素内的文字或者行内元素都会水平居中(前提是没有没有受到float元素影响)。

display: block

定宽块状元素

常用的方法使用margin:0 auto。

<div>
    <div style="width:100px;margin:0 auto">居中啊</div>
</div>

推荐使用这种
而该方法的缺点是必须要知道块状元素的宽度,若块状元素宽度不确定,我们怎么居中呢?

不定宽块状元素居中

使用table进行居中

<div>
    <table style="margin:0 auto;">
    <tbody>
        <tr><td>
        <ul>
            <li>我要居中</li>
        </ul>
        </td></tr>
    </tbody>
    </table>
</div>

<div>
    <div style="display:table;margin:0 auto;">我没有固定宽度,但是我想居中额</div>
</div>

将块状元素转为行内元素

<style>
    .box{
        text-align:center;
    }
    .box ul{
        list-style:none;
        display: inline-block;
        margin:0;
        padding:0;
    }
</style>

<div class="box">
    <ul>
        <li>将居中进行到底</li>
    </ul>
</div>

在不定宽的情况下,比较推荐这一种写法。
这里要格外注意的是:text-align属性意思是将元素内的行内元素进行居中,若没有将ul元素设置为行内元素,那么其实我们看到的效果是一样一样的,都可以看到“将居中进行到底”居中了。但实际上,只不过是将文字进行居中了而已,而ul元素和li元素还是铺满了div。所以设置ul为行内元素才能让ul进行居中哟。

float+relative

<!-- float居中法 -->
<style>
    .box{
        float:left;
        position:relative;
        left:50%;
        clear:both;
    }
    .box-center{
        position:relative;
        left:-50%;
    }
</style>
<div class="box">
    <div class="box-center">居中就是这么简单</div>
</div>

不推荐使用这种方式,因为这样会使同行的其它元素受到影响,导致html较为混乱。当然,若该行内没有其它元素,这种方式还是可行的。

display: flex

这个就更简单了,不管你是什么元素,一下就搞定了呢。

<!-- flex -->
<span style="display:flex;justify-content:center;">用我居中最爽了</span>

垂直居中

在html中水平居中虽然容易,但是垂直居中却没那么简单。
遗憾的是,垂直居中并不能想水平居中那样使用margin:auto 0;的形式自动居中了。
我们要怎么居中呢?

对行内元素进行居中

那么我们先认识一下vertical-align这个属性吧。
它可以有哪些值我不一一举例了,反正很多,默认为baseline;
我们知道,一个元素若设置了行高line-height,那么这个元素就会拥有一种叫做基线的东东。

有了基线,那么我们可以借助它来实现居中了。

<div style="height: 100px;line-height: 100px;">
    <span style="vertical-align:middle">
        我想垂直居中啊
    </span>
</div>

而这里如果没有设置vertical-align:middle的话,或者设置为baseline的话,看到的效果似乎是一样的,只是有微小的差别,可能会让你误以为baseline就能垂直居中,而实际上,我们将基线对准middle才是实现真正的居中。(就像之前我遇到的一种情况,即在行内元素中,拥有img标签和其它的行内元素,而这个img的高度大于其它行内元素,导致这个img将父元素的行高撑大了,而此时其它的行内元素展现出一种垂直居中的视觉效果。。)
所以对一个行内元素对其进行居中的话,给父元素设置一个行高(最好height和line-height一起设置,若只设置line-height会导致子元素为块级元素(设置了高度)时会出现line-height无效),然后设置自己的vertical-align:middle即可。

对块级元素进行居中

若我们需要对块级元素进行居中,那该咋办呢?

转化为inline-block

<div style="height: 100px;line-height: 100px;">
    <div style="display:inline-block;vertical-align:middle;line-height: 50px;height: 50px;">
        我是div我也想垂直居中啊
    </div>
</div>

使用table

使用td的vertical-align:middle

.box {
    height:300px;
    background:#ccc;
    vertical-align:middle;   /* td 标签默认情况下就默认设置了 vertical-align 为 middle,可以不需要显式地设置 */
}
<table>
    <tbody>
        <tr>
            <td class="box">
                <div>
                    <p>借table居中一下</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

display:table-cell

display:table-cell + vertical-align:middle的方式

.box2{
    height: 100px;
    background:#ccc;
    display:table-cell;
    vertical-align:middle;
}

<div class="box2">
    <p>IE8以上可使用table-cell居中</p>
</div>

flex

这个就简单了。

<!-- flex -->
<div style="display: flex;align-items:center;height:100px;">
    <span>我居中最简单</span>
</div>

不考虑兼容性,看来还是flex大法好呀。