垂直居中的几种实现方法？

sorra 发布于2019-08-28 17:57 / 2462人阅读

摘要：结构效果如下优点不用受内容高度的限制，简单实现垂直居中缺点不兼容方法二这个方法使用绝对定位的，把它的设置为，设置为负的高度。这意味着对象必须在中指定固定的高度。使用使块级元素垂直居中是很简单的。

方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。
结构效果如下：
http://jsfiddle.net/chic/4uduzb3t/1/
优点：不用受内容高度的限制，简单实现垂直居中；
缺点：不兼容ie6,7

方法二：这个方法使用绝对定位的 div，把它的 top 设置为 50％，margin-top 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
结构效果如下：
http://jsfiddle.net/chic/4uduzb3t/2/

优点：兼容性好
缺点：必须知道内容盒子的高度才可以，有了这点限制；

方法三：这个方法和方法二的原理是一样的。废话不多说看代码
http://jsfiddle.net/chic/4uduzb3t/4/

优缺点和法二一样，缺点嘛多了个额外的标签；

方法四：这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
结构效果如下：
http://jsfiddle.net/chic/4uduzb3t/3/

优点：非常简单
缺点：不兼容ie6,7

方法五：这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这个就不用实例了，您你看就明白；

方法六：这个方法的原理是利用元素的vertical-align,区别于方法一的是不限制在table元素中（用于图片的居中不错）；
结构效果如下：
https://jsfiddle.net/chic/mkd9ufmk/10/

优点：不用受内容高度的限制，兼容性好；
缺点：垂直居中的对象只限在行内元素范围

云服务器 GPU云服务器实现垂直居中 js缓存的几种方法最基本的几种 html的几种轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110918.html

纯CSS实现垂直居中的几种方法

摘要：垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，端实现垂直居中的方法一般是通过绝对定位，，负边距等方法。有了，针对移动端的垂直居中就更加多样化。方法这实际上是方法的变形，移位是通过来实现的。垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方...

FullStackDeveloper 2019-08-30 15:43 评论0 收藏0
纯CSS实现垂直居中的几种方法

摘要：垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，端实现垂直居中的方法一般是通过绝对定位，，负边距等方法。有了，针对移动端的垂直居中就更加多样化。方法这实际上是方法的变形，移位是通过来实现的。垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方...

sourcenode 2019-08-23 16:41 评论0 收藏0
使一个div垂直+水平居中的几种方法

摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这...

joyqi 2019-08-29 11:04 评论0 收藏0
面试常见问题——垂直居中的几种方法

摘要：前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。（前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里）做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。结构我是垂直居中元素方法1：dispaly:table-cel...

Prasanta 2019-08-28 18:05 评论0 收藏0
html的几种水平垂直居中的方式（基础）

摘要：前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。第一种方法 d第一种 .Centered1{ background-color: #800...

Songlcy 2019-08-30 15:44 评论0 收藏0