前端常用的必杀技之垂直左右居中的绝招

这两天在做页面，遇到不少问题，都是一些
平常都会遇到的，比如说如何让盒子垂直左右居中、盒子飘上去了，img和文字基线对齐……

今天说说垂直左右居中的绝招：
情况一：
一个浏览器页面中，只有一个div模块，让其上下左右居中

解决方案：

position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto; 

情况2：
　　一个父元素div，一个已知宽度、高度的子元素div(200*300)

position:absolute/fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-150px;

情况3:
一个父元素div，一个未知宽度、高度的子元素div

解决方案：

1. position布局，position设为absolute，其他同情景1

2. 设置表格布局；

   display：table

   父级元素：{ display:table;}

   子级元素： { display:table-cell;vertical-align:middle }

3. flex布局

       父级元素：{ 
   			    display:flex;
   			    flex-direction:row;
   			    justify-content:center;
   			    align-items:center;}
       
       子级元素：{flex:1}
   

4. translate

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   

另外今天get到的一些小技巧：
img与文字基线对齐的方法：
设置img为display：inline-block；vertical-align：baseline/0%；

pc端布局大法：

//设置背景百分百，固定定位；内容放在安全区 1200px 居中
<div class="我是安全区">
	<div class="bg">我是自适应背景<div>
</div>	

//要谁自适应就放在外面百分百，要谁居中就放安全区
<div class="我是自适应背景">
	<div class="contnet">我是安全区内容<div>
</div>	

怪异盒子box-sizing：border-box
什么时候用呢？当盒子使用了内边距，会撑开盒子，盒子就会产生变形，要恢复我们原本的宽度，我们得去用宽度-内边距才等于原本的宽度，这个时候怪异盒子就非常有用了，当然不嫌麻烦你也可以慢慢加减哈哈哈~

说到计算我们也可以使用calc（）计算；
当你的宽度是百分比，内边距是px单位，calc（百分比% - px）；精准计算简直是完美~

总结：
1、垂直左右居中的几种方法
2、img与文字基线对齐 baseiine大法
3、pc布局
4、怪异盒子
5、calc（）

2019.1.12 day4