记录第一次面试——广州凡科（二）
第2题：调动记忆的css题
（当时真是把什么表格元素、文本元素这些都凑五个写上去了，而且卷面还写的很乱。）
其实这些上网搜搜一大堆，只不过之前没有注意总结。以下贴个靠谱的方案。已经经过了本人的测试。
CSS水平居中+垂直居中+水平/垂直居中的方法总结 - 半夏半暖半倾城的博客 - CSDN博客
这个博主总结得相当全面！但是我还是要自己一点点打出来，加深一下记忆。
首先科普一下：
行内元素
常见的有比如有： <span></span>、<i></i>、<b></b>、<a></a>、<img />、<input type="" />
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
块级元素
<body></body>、<div></div>、<ul></ul>、<ol></ol>、<h1></h1>等标题
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
行内块级元素
通过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;
七种了……
后面还会有 记录第一次面试——广州凡科（三、四……），敬请期待
：
网友评论