垂直居中布局问题
题：<label class="title">基本信息</label>
1.css：.title{display: block;width: 100px;height: 100px;line-height: 100px;text-align: center;overflow: hidden;}
因为是单行，所以第一反应就是给个和height一样的line-height,这里就实现了 后来我想肯定不止一种；
2.因为个人比较喜欢flex布局，所以就想到：
.title{width: 100px;height: 100px;display:flex;justify-content:center;align-item:center;}
先justify-content:center水平居中，再align-item:center垂直居中；果然flex还是很好用的。
延伸：用完之后我就在想还有别的吗 一时没想出来 就百度了一下 以为是百度拓展的，也算让自己学习一遍吧；
父级元素高度不固定：父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：
<!--html代码--> <div id="div1">
这是多行文本垂直居中， 这是多行文本垂直居中， 这是多行文本垂直居中， 这是多行文本垂直居中。
</div>
/*css代码*/
#div1{ width: 300px; margin: 50px auto; border: 1px solid red; text-align: center; /*设置文本水平居中*/ padding: 50px 20px; }
父级元素高度固定：可以用vertical-align属性，但是它只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;。具体代码如下：
<!--html代码--> <div id="outer"> <div id="middle">
这是固定高度多行文本垂直居中， 这是固定高度多行文本垂直居中， 这是固定高度多行文本垂直居中， 这是固定高度多行文本垂直居中。
</div> </div>
/*css代码*/
#outer{ width: 400px; height: 200px; margin: 50px auto; border: 1px solid red; display: table; }
#middle{ display:table-cell; vertical-align:middle; text-align: center; /*设置文本水平居中*/ width:100%; }
以上不兼容ie7以下所以继续延伸：
<!--html代码-->
<div id="outer"> <div id="middle"> <div id="content">
这是固定高度多行文本垂直居中(兼容IE7)， 这是固定高度多行文本垂直居中(兼容IE7)， 这是固定高度多行文本垂直居中(兼容IE7)， 这是固定高度多行文本垂直居中(兼容IE7)。
</div> </div> </div>
/*css代码*/
#outer{ width: 400px; height: 200px; margin: 50px auto; border: 1px solid red; display: table; *position:relative; //兼容IE7及以下版本 }
#middle{ display:table-cell; vertical-align:middle; text-align: center; /*设置文本水平居中*/ width:100%; *position:absolute; //兼容IE7及以下版本 *top:50%; }
#content { *position:relative; //兼容IE7及以下版本 *top:-50%; }
子div垂直居中
<!--html代码--> <div id="outer"> <div id="middle"> 子div(固定大小)垂直居中 </div> </div>
第一种：根据子div具体大小设置偏移
/*css代码*/ #outer{ background-color: #13CDF4; width: 300px; height: 200px; position: relative; }
#middle{ background-color: #E41627; width: 100px; height: 100px; margin: auto; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }
第二种：利用translate
#middle{ background-color: #E41627; width: 100px; height: 100px; margin: auto; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); }
第三种：利用绝对布局absolute
<!--html代码--> <div id="outer"> <div id="middle"> 利用绝对定位实现子div大小不固定垂直居中 </div> </div>
/*css代码*/ #outer{ background-color: #13CDF4; width: 300px; height: 200px; position: relative; }
#middle{ background-color: #E41627; width: 100px; //子div大小可随意设置 height: 100px; margin: auto; position: absolute; top: 0;left: 0;right: 0;bottom: 0; }
第四种：利用vertical-align
#outer{ background-color: #13CDF4; width: 300px; height: 200px; display: table-cell; vertical-align: middle; }
#middle{ background-color: #E41627; width: 100px; height: 100px; margin: 0 auto; }
第五种：利用display: flex（把我喜欢的flex放到最后了，也许是因为兼容高版本不支持低版本吧 可惜了flex）
/*css代码*/ #outer{ background-color: #13CDF4; width: 300px; height: 200px; display: flex; justify-content: center;/*实现水平居中*/ align-items:center; /*实现垂直居中*/ }
#middle{ background-color: #E41627; width: 100px; height: 100px; }
以上就是我百度看见的 我相信肯定还有许多方法可以做到居中，大家多多尝试。
