今天与大家分享居中对齐的两个难点。多行文本垂直居中与不定宽的水平居中
1、多行文本垂直居中
方法1：
代码语言：javascript复制vertical-align:middle;注：vertical-align 作用单元格时，才生效，所以一般会结合dispaly: table-cell ; 一起使用才有效果
示例：
代码语言：javascript复制p{
border: 1px solid red;
height: 100px;
display:table-cell;
vertical-align:middle;
}方法2：
1. 父级的标签，高度和行高一致
代码语言：javascript复制p{
height: 200px;
line-height: 200px;
border: 1px solid red;
font-size: 16px;
}2. 子标签, 设置为行内块级元素，垂直居中，且单独设置行高
注： line-hight: 1 这里的1指与父级的字体大小相同，你也可以直接写具体的px
代码语言：javascript复制p span{
display: inline-block;
vertical-align: middle;
line-height: 1;
}完整代码：
代码语言：javascript复制<style>
p{
height: 200px;
line-height: 200px;
border: 1px solid red;
font-size: 16px;
}
p span{
display: inline-block;
vertical-align: middle;
line-height: 1;
}
</style>
<p>
<span> Lorem ipsum dolor sit amet,
iusto, nam qui quia quidem vel veritatis vitae.
</span>
</p>2、不定宽的块级元素水平居中
采用绝对定位使用
思路：
1.外层绝对定位，内层相对定位，外层的外层相对定位
2.外层左浮动，内层左浮动
3.外层右移50%，内层左移50%
示例：
代码语言：javascript复制样式部分：
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style-type: none;
border: 1px solid red;
}
.container{
position: relative;
/* 外层的外层相对定位 */
}
nav ul:after{
content: "";
display: block;
clear: both;
}
.pages3 {
position: absolute;
/*外层绝对定位*/
float: left;
left: 50%;
}
.pages3 li{
float: left;
position: relative;
/*内层相对定位*/
right: 50%;
}
.pages3 li:not(:first-child){
margin-left:5px;
}
</style>
html部分：
<header class="container">
<nav>
<ul class="pages3">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</nav>
</header>分析：
此方法有left:50%, 在margin-left:负的宽度的一半，只是宽度不确定，
所以就采用了position:relative; , right:50%; 而right：50%，
其实就是向左移动宽度的一半，
这里的百分比是以父级的宽度计算的
