css实现水平居中 垂直居中 水平+垂直居中
小小程序员～博客第五篇
居中的方法有好多，不过呢，这里举一些常见的例子啦，有不对的地方，请大佬指出哈
（一）水平居中
在开始讲解水平居中之前，想给大家讲一个属性，text-align 这个属性如果理解透了
大部分的居中有思路
我们透过现象看本质，为什么有时候加了text-align，没反应，有时候就可以，我想，如果能懂它的用法，对居中大部分都可以懂啦
- 只在块元素中使用，直接用在行内元素上不生效。
- 会对块元素中的所有行内元素内容对齐。
- 会对块元素中包含的文本内容生效。
- 在其内的块元素也会对齐是因为子块元素继承父块元素的text-align的属性。
也就是说，这个属性是只能用在块元素上的，如果你是span这种行元素的话，是需要把它变成block的，或者是把它的父元素变成块元素，这样一看，问题就好办啦。下面，我们从行元素和块元素，分别来讨论如何显示水平居中
行元素
第一中情况
<span class="test-horizontally">
11
</span>
.test-horizontally {
display: block;
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
这种情况，如果你不加block,变成块元素，text-align根本不会生效噢，因为上面说过，text-align不能直接作用在行内元素。
第二种
<div class="test-horizontally">
<span>11</span>
</div>
.test-horizontally {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
因为span的父元素是块元素，所以直接在父元素加text-align就好了，因为text-align会对块元素中的所有行内元素内容对齐。效果图如上所示
第三种
<span class="test-horizontally">
<span>11</span>
</span>
这时候只有把span变成block才行，道理如上
.test-horizontally {
display: block;
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
块元素
<div class="test-horizontally">
<div>11</div>
</div>
都是块元素的话，这时候要想清楚了，text-align只对块元素中的行内元素和文本居中噢，这个里面是块元素的话，分两种情况讨论
方案一，要先考虑子元素的宽度
子元素有宽度
.test-horizontally {
width: 200px;
height: 200px;
border: 1px solid;
}
.test-horizontally div {
width: 100px;
height: 100px;
margin: 0 auto;
}
有宽度是时候，需要用到margin属性，没有宽度它是不会理你的，因为有宽度才可以通过margin设置
子元素没有宽度
没有宽度，只能把子元素的display改成inline-block或者inline，对应上面的功能，才能使用text-align
.test-horizontally {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
.test-horizontally div {
display: inline;
}
方案二，绝对定位
<div class="test-horizontally">
<div>11</div>
</div>
如果子元素宽度已知，那
.test-horizontally {
width: 600px;
height: 600px;
border: 1px solid;
text-align: center;
position: relative;
}
.test-horizontally div {
width: 200px;
height: 200px;
border: 1px solid;
position: absolute;
left: 50%;
margin-left: -100px;
}
首先设置left为50%，让它偏离，不过它都是以它左上角为基准的，所以图形会过来一点
所以让它偏左一点，就加个margin-left 负的一半子元素的宽度即可，如下
如果子元素的宽度不知道，就可以借助css3属性，transform:translateX(-50%)
.test-horizontally {
width: 600px;
height: 600px;
border: 1px solid;
text-align: center;
position: relative;
}
.test-horizontally div {
width: 200px;
height: 200px;
border: 1px solid;
position: absolute;
left: 50%;
transform:translateX(-50%);
}
这样就可以啦，把margin替换成transform就可以了，不过我这里有点偏差，因为我用的是border边框，左右加起来共占据了两个像素，因此会有点偏移噢
方案三，flex布局,简单粗暴
不管你子元素有没有宽度，在它的父元素加上
display: flex;
justify-content: center;
.test-horizontally {
width: 600px;
height: 600px;
border: 1px solid;
display: flex;
justify-content: center;
}
效果如上图所示，完美实现居中
（二）垂直居中
说到垂直居中，我觉得，还是从行元素和块元素开始讲起
行元素
<div class="test-horizontally">
<span>11</span>
</div>
在span上，加上line-height等于父元素的高度即可
.test-horizontally span {
line-height: 300px;
}
块元素
方案一，改成行元素（下策）
<div class="test-horizontally">
<div>11</div>
</div>
当然，你可以把子元素改成行元素，然后加上line-height,但是我们往往需要它是块元素
方案二，绝对定位
<div class="test-horizontally">
<div>11</div>
</div>
.test-horizontally {
width: 500px;
height: 500px;
border: 1px solid;
position: relative;
}
.test-horizontally div {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
top: 50%;
margin-top: -50px;
}
这个是有高度的情况，如果高度不知道的话，可以把margin-top换成transform:translateY(-50%)
方案三，flex布局，又开始了又开始了
只要要父元素加上
display: flex;
align-items: center;
.test-horizontally {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
align-items: center;
}
.test-horizontally div {
width: 100px;
height: 100px;
border: 1px solid;
}
同样能达到效果。
水平+垂直居中
其实 ，我觉得这个就是前面两个的结合版，如果你一路看下来的话，就可以看的很清楚啦
方案一，绝对定位
<div class="test-horizontally">
<div>11</div>
</div>
.test-horizontally {
width: 500px;
height: 500px;
border: 1px solid;
position: relative;
}
.test-horizontally div {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
如果高度和宽度都不知道的情况下，就把
margin-top------>transform:translateY(-50%),
margin-left------>transform:translateX(-50%)
这是其中一种方法噢，还有一种比较奇妙的方法，不过需要固定的宽高
.test-horizontally {
width: 500px;
height: 500px;
border: 1px solid;
position: relative;
}
.test-horizontally div {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
以上这种方法也可以实现垂直居中呀
方案二，flex布局
只要在父元素那里加上
display: flex;
justify-content: center;
align-items: center;
.test-horizontally {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
.test-horizontally div {
width: 100px;
height: 100px;
border: 1px solid;
}
就可以实现效果啦，以上就是常见的方法啦，以后会有其他方法的更新噢，这次暂时就整理一些常用的。
喜欢的老铁点个关注，下次找我不迷路，嘿嘿
