(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】

时间:2021-7-3 作者:qvyue

一 仅水平居中

1 行内元素

1)给父元素添加 text-align:center 即可
我是子元素
.parent { width: 200px; background-color: red; text-align: center; } .child { background-color: green; }

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image
2)父元素添加 width:fit-content; 和 margin:auto 。
DOM结构不变。

.parent {
  width: fit-content;
  margin: auto;
  background-color: red;
}
.child {
  background-color: green;
}

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image

2 块级元素

1)子元素加 margin:0 auto
我是子元素
.parent { background-color: red; } .child { margin: 0 auto; background-color: green; width: 100px; text-align: center; }

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image

二 仅垂直居中

1 行内元素

1)line-height与height值保持一致即可【仅对单行文本生效】。
.parent {
  background-color: red;
  height: 200px;
  line-height: 200px;
}
.child {
  background-color: green;
}

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image

三 水平、垂直均居中

1 块级元素

1)”子绝【绝对absolute】父相【相对relative】”。

条件:必须知道 子元素的宽、高。

我是子元素
【Tip:以下均是这个DOM结构】 .parent { background-color: red; width: 200px; height: 300px; position: relative; } .child { background-color: green; width: 100px; height: 200px; position: absolute; /* 50%是基于父元素的 高度,100px是 子元素高度 的一半 */ top: calc(50% - 100px); /* 50%是基于父元素的 宽度,50px是 子元素宽度 的一半 */ left: calc(50% - 50px); }

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image
2)定位 + transform 。
.parent {
  background-color: red;
  width: 200px;
  height: 300px;
  position: relative;
}
.child {
  background-color: green;
  position: absolute;
  /* 下面2个50%,使得子元素的左上角点在父元素的正中心了 */
  top: 50%;
  left: 50%;
  /* 下面2个-50%【分别以子元素的宽、高为基准】,平移后便在父元素的正中间了 */
  transform: translate(-50%, -50%);
}

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image
3)定位 + margin 。
.parent {
  background-color: red;
  width: 200px;
  height: 300px;
  position: relative;
}
.child {
  background-color: green;
  /* 这里的 width、height 要设值,不然子元素可能会填满父元素 */
  width: 100px;
  height: 200px;
  /* 原理:子元素就会填充父元素的所有可用空间,所以,在水平垂直方向上,就有了可分配的空间 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image

若子元素的宽、高都注释掉,效果就不明显了,子元素会充满父元素:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image
4)父元素设置 padding 值。
.parent {
  background-color: red;
  padding: 10px 20px;
}
.child {
  background-color: green;
}

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image
5)父元素 display:flex 。
.parent {
  background-color: red;
  width: 200px;
  height: 300px;
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}
.child {
  background-color: green;
}

效果:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image
6)父元素为 table-cell 布局。
我是子元素
.parent { background-color: red; width: 200px; height: 300px; /* display: table-cell 将parent模拟成一个表格单元格【td标签】 */ display: table-cell; /* 水平居中 */ text-align: center; /* 垂直居中 */ vertical-align: middle; } .child { background-color: green; }
7)其他的也可以实现,但是可能适用性、理解难度较大,所以暂时不列出~

四 总结

1 思维导图【方便记忆~】:

(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
image

2 本文章只是简单说了实操部分,它们更深入的原理没有讲解,大家感兴趣的话可以自己私底下去搜索相关资料 或 底下评论与交流~

五 更多

1)本人是20届本科生,大厂、创业公司都待过,现在是BAT的1名前端工程师(目前正往“全栈”方向发展,已开始写公司里的部分后端代码~)。
2)以下是个人整理的一些笔记和书籍(永久有效链接: https://pan.baidu.com/s/1SPc3umO6cZlBtoPylSaHzw 密码: eqee ,若失效的话可以到vx公众号 “码农三少” 回复 pdf 以进行最新资料的获取):
(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
个人技术笔记(350+算法题解、前端重点面经汇总、图解HTTP等).png
(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
理财书籍pdf.png
(前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
技术书籍pdf.png
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。