css 竖直居中常用的几种方法

原创 1948712434 随笔 CSS 236阅读 2018-02-01 17:47:23 举报

第一种方法:line-height

在单行文本元素中,将line-height高度设置为元素本身的高度,即可将文本竖直居中。

缺点:需要知道居中元素的自身高度,当居中元素的display:inline-block时,会形成居中元素的子元素之间有4px空白间隔,去除办法:
如:



中间两块有空白间隔

解决这种情况可以改变HTML的结构

优点:简单,兼容性好。

第二种方法:利用绝对定位 ( position:absolute;)

将元素的 top设置为50%,再讲margin-top设置为元素高度一半的负值。

html 代码

第三种方法:利用transform:translate(): 兼容性要求高
例:
html 代码

优点:不需要知道居中元素的高度。
缺点:兼容性差(ie8及以下版本浏览器不支持)

总结:页面布局是一般都会使用到定位,所以定位也是关键,居中使用的方法一般会考虑发到窗口缩小内容溢出一方面,是否形成滚动条,还有无论水平居中和竖直居中的原理都是差不多的,只要理解了一个就是相当于理解全部了。

第四种方法:利用position,margin,top,bottom共同完成
例子:

优点:兼容性好,无需知道父元素和居中元素的height。
缺点:利用到定位。

第六种:利用display:flex。
例子:

优点:简单明了。
缺点:兼容性高。
附加(熟练了display:flex里面的所有知识点可以很好地制作水平居中,竖直居中,响应式的布局等)。
送个链接(http://www.runoob.com/w3cnote/flex-grammar.html)。

第七种:使用vertical-align:middle。
利用这样个就要好好了解vertical-align的使用了,还是自己上网找吧。
先看一张图吧,


右图里面可以看出,整张图就是行高,里面的就自己揣摩吧,不过里面有一个紫色的行线,middle(中间的,中部的意思)。意思就是这一行的中部位置了,也就是display:inline或者是display:inline-block元素的中间位置了。还是看例子比较实际点:
还没设置display:inline-block时,两个子元素不在一行。

两个子元素都设置了display:inline-block时,两个子元素在一行了。

当其中一个元素设置了vertical-align:middle时,该元素的中部会对正不设置的元素底部(bottom)。

那么两个元素设置了vertical-align:middle时,两个子元素的中部相应对齐。

那么问题又来了,要是将两个子元素都居中了呢?怎么办呀!!!
从上面我们可以看出要一个元素居中需要另一个比自身要高的元素,然后让居中的元素。那么问题又来了要输里面只要一个元素呢?又怎么办呀???来个例子吧(设置多一个元素,这个元素与居中元素的CSS差不多一样,就是设置出的元素的CSS的width:0;height:100%;这样就是让所有同辈行内元素都行排列在最高的元素(height:100%)的中部。):

不过这里也可以用伪类添加一个最高的元素,下面评论2楼的实例就是。

评论 ( 4 )
最新评论
lzh2740128806 3F 2018-04-20 10:20:34 4F

代码样式注释里的div应为ul

lzh2740128806 2018-04-20 10:02:49 3F

其实第一种方法并不是完全的垂直居中,误差取决于ul的字体大小,而且刚才我再谷歌里测试了一下,li没有文本同辈或同辈元素时不居中

解决方法:
ul加font-size: 0;
ul用伪类给li加同辈文本

bestime 2018-02-03 16:25:15 2F

第三种,缺点:容易造成文字模糊。

lzh2740128806 2018-02-02 09:48:36 1F

别处学到的方案 分享一下

html 代码