记录第一次面试——广州凡科（二）

第2题：调动记忆的css题
（当时真是把什么表格元素、文本元素这些都凑五个写上去了，而且卷面还写的很乱。）
其实这些上网搜搜一大堆，只不过之前没有注意总结。以下贴个靠谱的方案。已经经过了本人的测试。

CSS水平居中+垂直居中+水平/垂直居中的方法总结 - 半夏半暖半倾城的博客 - CSDN博客

这个博主总结得相当全面！但是我还是要自己一点点打出来，加深一下记忆。

首先科普一下：

行内元素

常见的有比如有： 、、、、、
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行

块级元素

、、

行内块级元素

通过display:inline-block;进行转换
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

行内元素里面不能嵌套块级元素
行内块级元素里面可以嵌套块级元素

针对题目，使元素垂直居中的方式：

- 行内元素：

1.使他的父级元素变成块级元素display：block
2.水平居中：父级元素：text-align：center
3.垂直居中：
单行的行内元素：使元素高=父级元素的高
多行的行内元素：给父级元素设置display:table-cell;vertical-align: middle;

- 块级元素：

已知宽高

1.设置父元素相对定位、子元素绝对定位，
水平居中：right: 0; left: 0; margin: 0 auto;
垂直居中：top: 0; bottom: 0; margin: auto 0;
（可以合写为）top: 0; bottom: 0; right: 0; left: 0; margin:auto;

2.设置父元素相对定位、子元素绝对定位，
水平居中：left: 50%;margin-left: -(元素宽度的一半)px;
垂直居中：top: 50%; margin-top: -(元素高度的一半)px;
（可以合写为）left: 50%; top: 50%; margin-left: -(元素宽度的一半)px; margin-top: -(元素高度的一半)px;

未知宽高：

1.设置父元素为相对定位，给子元素设置绝对定位，
水平居中：left: 50%;translateX(-50%)
垂直居中：top: 50%; translateY(-50%);
（可以合写为）left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

2.把元素转换为行内元素display: inline;display: inline-block;
水平居中：父元素设置text-align:center;
垂直居中：
单行的行内元素：使元素高=父级元素的高
多行的行内元素：给父级元素设置display:table-cell;vertical-align: middle;

宽高定不定均可：

1.flex布局：设置父元素为flex定位display:flex;
水平居中：justify-content: center;
垂直居中：align-items: center;

七种了……
后面还会有 记录第一次面试——广州凡科（三、四……），敬请期待
：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！