彻底理解水平垂直居中
水平垂直居中
页面中 一个 div 水平垂 直居中
方法一
这个难度理解上不是很难。已知 div 宽高时：设置绝对定位，top,left 均取 50% ，然后向上移动自身高度的 50%，再向左移动自身宽度的50% 即可。
div{
width: 200px;
height:100px;
border:1px solid #6f6;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
}
方法二
根据上面的思路，可以用 css 的transform 实现，原理跟上面是一样的，不过同样适用于不知道 宽高的情况下
div{
/* width: 200px;
height:100px; */
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方法三
这个方法也能用于不知道宽高的情况下
div{
/* width: 200px;
height:100px; */
/* border:1px solid #6f6; */
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
p标签在父级 div 中水平垂直居中
<body>
<div>
<p>你的能量p>
div>
body>
这里需要理解其原理，p标签在没设置宽和高时，默认继承自父元素，也就是这里的 div . 假设注释掉下面语句：
可以想象p 标签设置了 一个边框，为了表现出来，换成绿色，但是不设置宽高，可以看出，p标签的 border 是和父级的 border重合了，原因是因为p标签的宽高继承了 div的宽高。p标签的盒子 此时已经做到了 水平垂直居中于父元素 div
为了明显一点，我们可以手动设置一下 p标签的宽高，效果如图
p{
//手动设置宽高
width: 80px;
height:40px;
position:absolute;
/* text-align:center;
line-height:100px; */
border:2px solid green;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
}
可以清楚的看到，p 标签的盒子已经是水平垂直居中于父元素 div 中了，那么现在要做的就是 将 p 元素的盒子模型的 content 区放在盒子正中央。
添加下面两条样式：设置水平居中 text-align:center 即可，垂直居中，只需要设置行高等于盒子的高度即可。
text-align:center;
line-height:40px;
最后把 p标签的border 去掉即达到效果。
图片在页面水平垂直居中
不要被迷惑了，img 是行级块元素，inline-block div可以设置的样式，img 也行，因此，上面div居中的三种方法任意一种都行
图片在父级水平垂直居中
仍然不要被迷惑了，只是在一开始时，div的父级是 body ，现在 img 的父级是 div ,上面的三种方法一样可以用,比如：
方法一，二，三
div {
position: relative;
width: 300px;
height:300px;
border:1px solid #6f6;
}
img {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
方法四
div {
width: 300px;
height:300px;
border:1px solid #6f6;
display:table-cell;
text-align:center;
vertical-align:middle;
}
img {
width: 200px;
height: 200px;
}
table-cell:此元素会作为一个表格单元格显示，类似 td 和 th
方法四不适用于 其它 块级子元素在父元素中水平垂直居中，因为此时 text-align : center 是对块级元素起不了作用的 如
<div class="wrap">
<div class="content">div>
div>
是达不到水平垂直居中的。
换成 span 可以达到效果
.wrap{
width: 300px;
height:300px;
border:1px solid #6f6;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.content{
border:1px solid red;
}
<div class="wrap">
<span class="content">你的能量span>
div>
初步判断：只有子元素本身是行级元素时 或具有行级属性时，也就是 inline时，上面的方法才适用
子元素改回 div 标签，并设置 display 属性为 inline-block 或者 inline 都行。
<div class="wrap">
<div class="content">超乎你的想象di'v>
div>
.wrap{
width: 300px;
height:300px;
border:1px solid #6f6;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.content{
display:inline-block;
border:1px solid red;
}
效果还是可以达到水平垂直居中。
上面的问题都可以归结为一个问题，就是子元素在父元素中水平垂直居中问题，解决这个问题的办法，上面的3个办法任何一种都行。另外就是注意子元素内含有文本时，注意盒子模型中 content 内容区居中的处理方法。
另外就是方法四的猜想：当子元素是行级元素时的新处理方法，在容器内display 属性设置为 table-cell ，显然，前面三种方法也适用，只需设置dispaly 属性为 inline-block就和一般的块级元素居中处理一样了