CSS的写法

写在前面

CSDN话题挑战赛第1期

• 活动详情地址：CSDN

• 参赛话题：前端面试宝典

• 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
  总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

• 创作模板：

携手共筑前端面试宝典

• 题目一
  • 考点
  • 答案
  • 扩展

题目一

css水平、垂直居中的写法，请至少写出4种？

考点

这题考查的是css的基础知识是否全面，所以平时一定要注意多积累。

答案

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

扩展

水平、垂直居中具体使用场景

1.水平居中

场景1：子元素是块级元素且宽度没有设定。

场景2：子元素是行内元素，子元素宽度是由其内容撑开的。

场景3：子元素是块级元素且宽度已经设定。

2.垂直居中

场景1：子元素是行内元素，高度是由其内容撑开的。

场景2：子元素是块级元素但是⼦元素高度没有设定，在这种情况下实际上是不知道⼦元素的高度的，无法通过计算得到padding或margin来调整，但是还是存在⼀些解法。

场景3：子元素是块级元素且高度已经设定。

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：CSDN