css快捷方式 - 爱码网

本来是年前准备整理发布的，都搞定50%了，一篇万恶的《盗墓笔记：九幽将军》让我猪油蒙了心.....诶，不说了，搞一半就算了，最后还忘了保存，此刻只听得那一万只草某马呼啸而过...

言归正传吧，去年面试的时候，项目经理问我一个问题，做几年了？第二个问题，有博客什么的吗？问题就出在第二个问题，他触动了我，让我觉得是时候开始形式上的积累了，

脑子比较内存有限，以前我的积累方式就是收藏夹，真到用的时候，那家伙，不是找不到在哪儿，就是链接失效，那时候的心情，不说了，蛋扯的有点多了...总而言之，干这一行，积累是很有必要的，未必要见解高深，但一定要做到心中有数，用时知道在哪儿找！

begin...

　　No.1　居中对齐系列

　　1、知道子元素宽度与高度的情况下解决思路：位置定位法 absolute + margin

　　 .parent {

    position: relative;
background: skyblue;
width: 100vw;
height: 100vh;
　　}
　　.child {
position: absolute;
width: 100px;
height: 60px;
top: 50%;
left: 50%;
margin: -30px 0 0 -50px; /**子元素宽度/2  高度/2*/
background: #131313;
　　}

   2、不知道子元素高与宽的情况下，解决思路：位置定位 absolute + transform

.parent {
position: relative;
background: skyblue;
width: 100vw;
height: 100vh;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 50%;
height: 50%;
background: #00ffff;
}

3.通用法：flexbox居中对齐

.parent {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: #00ffff;
}
 .child{
width: 50px;
height: 50px;
background: #512da8;
 }

今天先这么着，未完待续...