css布局之垂直居中

css布局之垂直居中

伴随音乐：左边-苏打绿

元素垂直居中是css中老生长谈的话题了。在实际应用中也经常出现，当然，对于目前的我来说，最大的价值是，它经常非常频繁的出现在面试题中，而面试，fuck是我秋招的绊脚石，战略上重视，战术上轻视，是无法获得offer的。 0 offer的痛让我严重怀疑自己的智商。 ok， 废话不多说，让我们开始随着谷歌一起开始学习之路吧。

本文的主要内容呈现在下面的这张思维导图上：

文字垂直居中我们就不谈了。 核心在导图中已经说明，多行的垂直居中是一个我待解决的课题，有兴趣的话可以简单参考下以下的这篇文章：

大小不固定的图片、多行文字的水平垂直居中

本文的重点是，图片的垂直居中。

html代码：

<div class="parent">
    <img class="img1" src="./img/girl.jpg" alt="This is a picture.">
</div>

图片大小固定

父元素使用relative定位，子元素使用absolute定位，并使用margin进行微调，实现真正的垂直居中。

css 代码：

.parent {
    width: 300px;
    height: 300px;
    position: relative;
    background-color: bisque;
}
.img1 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
} 

好，我们来理解一下这段代码。 我们的图像外面有一个block块，如果我们想要图像相对于该块实现垂直居中，那么，最好的方法是使用absolute，因为absolute的作用就是实现相对定位。 如果仅仅是这样的话，为什么父元素要使用relative呢？

因为， absolute是相对于上一级position不为static的元素进行相对定位。static是position默认值，所以我们需要为父元素指定另外的position。 ok， 复习一下，常用的position都有哪些， relative， fixed，static，absolute。 fixed是相对于窗口进行定位的，relative是相对于其在文档流的正常位置相对定位，只要我们不指定相对的移动数值，那么，relative实现的效果是和默认static一致的。

这，就是， 为什么使用 relative+ absolute的结合。

居中的代码是设置 top left 属性，但是，这个50% 指的是图像左边和上边居中，我们要的是图片的中心居中。 所以，还需要进行精细化的一个移动。 也就是 margin-left和margin-top的一个设置。

图片大小不固定

transform

承接上文，使用 relative+ absolute组合时，如果图片大小不固定，我们可以通过transform进行微调：

.parent {
    width: 250px;
    height: 250px;
    position: relative;
    background-color: bisque;
}
.img1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

flex

.parent {
    width: 600px;
    height: 600px;
    background-color: bisque;
    display: flex;
    align-items: center; 
    justify-content: center;
    font-size: 0;
}

flex也是很常用的一种方法。

要记得的是，align-items是垂直对齐，justify-content 是垂直对齐。

flex属性要设置在父元素上。

table-cell

.parent {
    width: 300px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-color: bisque;
}

而table-cell中，text-align代表 水平居中，vertical-align代表垂直居中。

table-cell的应用可以参考文章：

我所知道的几种display:table-cell的应用

font-size

.parent {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;  
    font-size: 0;  
    background-color: bisque;
}
 .img1 {
    vertical-align: middle;  
}

这种方式是不是很像文字的居中，但是 重点在于，如果不添加 font-size的话，基线的位置并不代表中线的位置，详细的图片说明在文章图片垂直居中 中。

总结

我所列出的知识几种较为简单的方法。 但讲真，不认真去理解的话，我就总是记不住，所以有了这篇简单的文章。

虽然好像我们在工作中往往考虑到的是一些交互问题，但是基本的还是要会的。