Hello！我是super喵二！刚刚在写一个音乐播放器，其中用到ul没有设置宽高，由li撑起，然后需要居中显示在ul的父级div中。刚刚突然忘记了，然后查了下，最后出现居中效果，那就顺便总结下居中问题吧~~~
一、水平居中
1、行内元素（文字、图片、链接等）：
text-align: center;//对inline，inline-block，inline-table有效
2、块元素（div/p等）：
margin: 0px auto;//无论宽度是否已知
（不过加一句，就是开头的问题，我只需要设置ul的display:inline-block，就实现居中了，这个问题还在思考，不过建议最好将没有设置宽的块级元素设为inline-block，再将其父元素添加text-align:center;）
3、多个块级元素
如果有多个块元素需要水平居中时，有两种办法可以实现。一种是借助inline-block，另一种是借助flex。，设置块元素display:inline-block,其父元素水平居中：
.div1 {
text-align: center;
}
.div1 div2 {
display: inline-block;
}
用flex的话需要给块的父元素添加如下样式：
.div1 {
display: flex;
justify-content: center;
}二、垂直居中
1、行内元素：
单行的行内元素：一种方法可以设置padding-top与padding-bottom的值相等来实现居中；另一种方法是知道高度，设置line-height=height。
多行的行内元素可以考虑四种方法：
one：设置padding-top与padding-bottom的值相等
two：万能的flex布局{display: flex;justify-content: center; flex-direction: column; height: 400px;}
three:vertical-align,这种用法才开始接触css时，我经常用但是没有效果，后来才发现要这样用呀（基本用在display为table里）
.div1 {display: table;}
.div1>div2 { display: table-cell;vertical-align: middle;}
four:最后一种方法是在网上看到的：直接截个图吧：
2、块级元素：
块级元素主要是通过定位设置margin,padding等：
已知div2的高度时，假设相对其父元素是position:absolute
{ position: absoulte;top: 50%; height: 100px;margin-top: -70px; //这里70px是height*1/2 + padding padding: 20px;}
块元素高度不知道时
{transform: translateY(-50%);
top: 50%;
position: absoulte;} 万能的flex布局，和水平居中类似，只需要再加一句话:flex-direction: column;就ok了（flex布局还是蛮不错的，大家可以经常使用哇，菜鸟教程上都说了得到所有浏 览器的支持了哟）
三、水平垂直居中：
就是将以上一些组合使用就是了。
比如flex布局，只需要加一句：align-items: center;
{ position: absoulte;
top: 50%;
left: 50%;
margin: -120px 0px 0px -220px; //height一半，width一半，另外加上padding值
height: 200px;
width: 400px;
padding: 20px;
}
{ top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
当然本文有自己的总结，也有从大神的博客中转载一些，具体情况具体讨论，大家多试试，就知道了~~~~~~~~~~如有错误/补充，欢迎提出！！！
