CSS居中总结

概述

---

工作三个月，写了各种活动网页、小型CMS，也算是把自己的CSS基础补上来了。一开始遇到最多的问题莫过于居中问题了，这里就做下小小总结吧。

水平居中比较好处理，一般来讲通过text-align:center; 和margin: 0 auto; 都能解决，主要问题可能都集中在垂直居中上，以下是实战中总结的有效的居中方法。

行内元素（inline）

方法一、单行行内元素， 父元素设置line-hight和高度相等可以达到垂直居中

<div class="parent">
    <div class="child">
        This is a inline element!     //为了撑起child高度
    </div>
</div>
.parent{
    width: 400px;
    height: 350px;
    line-height: 350px;    
    text-align: center;
    border: 1px solid black;
}
.child{
    width: 150px;
    display: inline;
    border: 1px solid black;
}

效果如下：

该方法对于单行行内元素，简单有效！

方法二、多行垂直居中 父元素设置line-height等于hight，子元素设置display:inline-block;vartical-align:middle以及line-height:1.5;覆盖父级元素line-hight为正常值即可。

<div class="parent">
    <div class="child">The first inline element!<br>
    The second inline element!</div>
</div>

.parent{
    height: 300px;
    line-height: 300px;
    width: 500px;
    border: 1px solid black;
    text-align: center;
}
.child{
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

效果图如下：

verticle-align

这里顺带提一下 vertical-align:middle；这个神坑，刚开始一直以为这个就是垂直居中，后来发现怎么用都不奏效，自己去查了一下文档，才了解到：

vertical-align:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

也就是说vertical-align:middle;只能让行内元素相对于该行居中，详细见以下示例：

<div class="parent">
    <span class="child">This is a
        <span class="top">Top</span>
        <span class="middle">Middle</span>
        <span class="bottom">Bottom</span>
        inline element!</span>
</div>
.parent{
    width: 400px;
    height: 350px;
    border: 1px solid black;
    text-align: center;
}
.child{
    font-size: 32px;
    display: inline-block;
    vertical-align: middle;   /*在块级父元素中垂直居中无效*/
    border: 1px solid black;
}
.top{
    font-size: 16px;
    vertical-align: top;
}
.middle{
    font-size: 16px;
    vertical-align: middle;
}
.bottom{
    font-size: 16px;
    vertical-align: bottom;
}

效果如下图：

方法三、利用padding上下内边距相等，实现垂直居中，对于单行、多行均有效。该方法的缺点在于父级单位的高度不确定。

<div class="parent">
    <span class="child">This is a inline element!</span>
</div>
.parent{
    padding: 50px 0;
    width: 400px;
    border: 1px solid black;
    text-align: center;
}
.child{
    font-size: 32px;
    border: 1px solid black;
}

块级元素

方法四： absolute绝对定位 该方法适用于子元素高度确定的情形

<div class="parent">
    <div class="child">This is a block element!</div>
</div>
.parent{
    position: relative;  /*别忘了父元素加上定位*/
    margin: 50px auto;
    height: 300px;
    width: 500px;
    border: 1px solid black;
}
.child{
    position: absolute;  
    top: 50%;
    left: 50%;
    width: 200px;
    height: 150px;
    margin-left: -100px;   /*宽度的一半*/
    margin-top: -75px;    /*高度的一半*/
    border: 1px solid black;
}

image.png

方法五、 对于子元素高度不确定的情形，利用absolute定位+transform

.parent{
    position: relative;
    height: 300px;
    width: 500px;
    border: 1px solid black;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid black;
}

实践看来，这个方法基本适用于各类情况，包括行内，块级。

#######方法六、flexbox弹性盒子，CSS3提供的弹性盒子模型，真的很强大。用于单个子元素的居中也是超级简单。

.parent{

    height: 300px;
    width: 500px;
    border: 1px solid black;
    display: flex;
    justify-content: space-around; /* 水平居中*/
    align-items: center; /*垂直居中*/
}

就是这么简单，flexbox，哈哈！

最后

以上就是常见的居中问题解决办法，有可能有些情况没有考虑到，以后再补充了。希望大家也不再为居中的问题而烦恼。

博客新人，纯手码，大家觉得有帮助的点个赞呗，也欢迎留言交流，嘻嘻！