发表于： 2017-06-14 23:38:36
1 1147
一、今天完成的事情：
1， 职位介绍页的JS功能，数据的获取。
2，搜索职位页的静态页面。
二、明天计划的事情：
1，后端这边接口也写好一两个了，今天开始调接口，渲染页面。
三、遇到的问题：
暂无
四、收获：
1，学习flex布局方式，以前在做任务的时候，虽然也用过，但是因为刚开始学习，师兄不建议使用这种布局方式，当时这只是浅显的了解了下这方面的知识。现在开始慢慢补这方面的知识，但愿不晚~
CSS有哪些方式可以实现垂直居中？
1.背景介绍
44年前我们把人送上月球，但在CSS中我们仍然不能很好的实现垂直居中。——@James Anderson
2.知识剖析
垂直居中就是竖向居中
接下来就讲解在css中实现垂直居中的几种方法：
1、单行文本垂直居中方法
说明：
该方式只适用于情况比较简单的单行文本，只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
click me2、多行文本垂直居中方法
说明：
2.1父级元素display:table-cell，vertical-align:middle；
2.2使用table来布局；
2.3多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top ；
click me3、div垂直居中：table
说明：
在table标签中，单元格框中的单元格内容是水平垂直居中的。
display:table此元素会作为块级表格来显示 类似table标签
display:table-cell 此元素会作为一个表格单元格显示 类似td 和 th标签
4、div垂直居中：inline-block
说明：
给元素设置dispaly：inline-block配合vertical-align：middle来垂直居中
click me5、div垂直居中：绝对定位之margin：auto
说明：
父元素相对定位，子元素绝对定位。 子元素的上下左右均设置0定位且设置margin：auto
click me6、div垂直居中：绝对定位之负值法
说明：
已知元素高度后，使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2的负值；内容超过元素高度时需要设置overflow决定滚动条的出现；top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合；
click me7、div垂直居中：绝对定位之translate
说明：
CSS3的兴起，使得垂直居中有了更好的解决方法，就是使用transform代替上一种方法margin. transform中translate偏移的百分比值是相对于自身大小的
click me8、div垂直居中：flex
说明：
给父元素设置display：flex后再设置align-items: center表示让子元素垂直居中；
click me3.常见问题
4.解决方案
父元素{
background-image: url("");
background-position: center center; //或者写成50% 50%;
background-repeat: no-repeat;
}
click me5.编码实战
6.扩展思考
使用writing-mode实现垂直居中
取值：
vertical-rl：垂直方向自右而左的书写方式。
vertical-lr：垂直方向自左而右的书写方式。
click me7.参考文献
参考：张鑫旭博客-垂直居中
8.更多讨论
还有更多实现垂直居中的方法吗？
返回列表
评论