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; }

就可以实现效果啦，以上就是常见的方法啦，以后会有其他方法的更新噢，这次暂时就整理一些常用的。

喜欢的老铁点个关注，下次找我不迷路，嘿嘿