HTML之垂直居中问题

今天遇到一个垂直居中的问题，调试了一个多小时，终于找到一个解决办法，虽然不够完美，但是能解决当前问题，现来总结一下居中的一些常见问题：

表格居中：这个最好解决，直接调用现成的CSS Style - vertical-align: middle
DIV居中：这个就挺麻烦，因为现成的CSS Style对DIV无效，所以只能想一些办法来实现这种效果：
- 如果是单行文字垂直居中，那最好的解决方案是定义DIV的inline-height和height为相同的值（也就是DIV的高度），这样就居中了；
- 利用padding设置垂直居中，我们知道padding是内边距，如果设置内边距上下相等，那么DIV不就居中了；
万能方法：这个方案适用于所有的页面元素，首先自己计算好元素占用了多少个像素和元素距离border-top的距离，直接更改padding-top的值为你计算的距离，这样元素就垂直居中了。虽然有点投机取巧，但是能实现效果也不失为一种解决方案！
定义三个DIV，相互嵌套，如下图最终想要居中的元素居中了，CSS为：

.outerDiv{height:100px;width:100px;position:relative;}
.middleDiv{position:absolute;top:50%;}
.innerDiv{position:relative;top:-50%;}

因为我要居中的元素是ul里面的li要垂直居中，所以只能用方法3了，以后如果有更好的方法，接着更新！

转载于:https://www.cnblogs.com/garinzhang/archive/2012/07/04/2575888.html

HTML之垂直居中问题相关推荐

html 文字上下垂直居中
只是文字的是话可以考虑使用line-height,,,, 当把 line-height 的高度设置和 height 高度一样就能使文字垂直居中一段简单的代码 <!DOCTYPE html&g ...
微信小程序 view中的image水平垂直居中
当 display: flex 配合 justify-content: center 使用时可以让view水平居中而配合 align-items: center 用时可以实现垂直居中效果 .card ...
用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
jQuery插件thickbox在ie下垂直居中问题
jQuery 插件 thickbox 3.1 在ie下总不能垂直居中,按"http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positi ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
水平，垂直居中的15种方法
一.水平居中 1.文字水平居中 <div class="one"> 测试居中 </div> <style> .one{ width: 200px ...
HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，
1 标签包含规范 ◆div可以包含所有的标签. ◆p标签不能包含div h1等标签. ◆h1可以包含p,div等标签. ◆行内元素尽量包含行内元素,行内元素不要包含块元素. 2 规避脱标流 ◆尽量使用 ...
CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
html整体垂直居中,htmlcss垂直水平居中
html如何将框内的文字既垂直居中又水平居中? 在html css 设计中,怎么让border内的文字既水平剧中又水平居中呢? 可以使用"text-align"属性让文字水平居中 ...
CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...

HTML之垂直居中问题

HTML之垂直居中问题相关推荐

最新文章

热门文章