在做H5的过程中，经常会遇到文字或者图片的垂直居中问题，试了不同的办法，感觉这是一个困扰前端程序员的难题。网上也能找到许多文章，本文仅列出我所用到过的一些办法。

文字居中

使用line-height

line-height是最简单的让文字居中的办法了，即设置line-height和div高度一样。但这种使用有限制，高度只有使用绝对值，不能使用百分比之类的相对值。
HTML:

<div>this is vertical align text</div>

CSS:

div {height: 100px;line-height: 100px;
}

如果是多行文字的话，可以这样：
HTML:

<div><span>vertically centered text</span></div>

CSS:

div
{height: 200px;line-height: 200px;
}span
{display: inline-block;vertical-align: middle;line-height: 14px; /* <-- adjust this */
}

表格法

可以借助于html的一些标签来实现垂直居中，例如表格就是可以参考的一种。
HTML:

<div class="ext-box" style="width:100%;height:100%"><div class="in-box"><span>确定</span></div>
</div>

CSS:

.ext-box {display: table;
}
.in-box {display: table-cell;vertical-align: middle;text-align: center;
}

在上面的写法中，外层div被设置成了表格显示，内层div被改成了表格的一个单元，利用单元格内垂直居中的属性，实现文字居中。

附上两篇stackoverflow上关于文字居中的帖子，比较有参考意义：

Is it possible to vertically align text within a div?

CSS Center text (Horizontal and Vertical) inside a DIV block

图片居中

之前尝试过使用表格法来设置图片居中，偶尔会出现一些无法严格居中的情形，也没搞清楚到底是为什么，只好尝试别的考虑。

inline-block helper

借助于inline-block相互对齐属性，可以实现图片的居中。
HTML:

<div class=frame><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>

CSS:

.frame {height: 25px;      /* equals max image height */width: 160px;border: 1px solid red;white-space: nowrap;text-align: center; margin: 1em 0;
}.helper {display: inline-block;height: 100%;vertical-align: middle;
}img {background: #3A6F9A;vertical-align: middle;max-height: 25px;max-width: 160px;
}

在上面的代码中，首先设置helper占据frame高度。这个时候，另外一个inline-block标签span就可以中间对齐helper，从而实现图片的居中。当然，这里面的frame也必须是固定高度值。

图片居中，目前只尝试了一个使用办法。附上stackoverflow上的帖子，供大家参考。

How to vertically align an image inside div

可以看出，在对齐的各类办法中，一般都要求高度是固定的。在移动WEB开发中，宽度是固定手机屏大小，但高度一般是可以往下延伸的。不过，我的一般处理办法是尽量避免滚动屏幕，一屏看完所有信息是最好的，所以在设计的时候，布局尽量松散，就是说留有余地，在不同的屏幕上，不会因为这些固定高度的控件挤压布局而出现重叠的情况。

前端开发确实有太多的细节需要考虑，继续积累吧！

html中的垂直居中实现相关推荐

android studio table居中代码_五个方法实例代码详解教你在CSS中实现垂直居中
点击上面"蓝字"关注我们你是否和小编一样在编辑一个版面时,通常用到水平居中和垂直居中,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:ce ...
div中字垂直居中对齐
div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...
子盒子在父盒子中水平垂直居中
子盒子在父盒子中水平垂直居中的几种实现方式. 方式一:margin; HTML:  <div class="father"&g ...
css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
不定宽高的div中文字垂直居中
最近公司的项目里面有个要调样式的页面 , 可能是很长很长时间没有写过css样式方面的东西了.吐槽一下我自己,只是一个简单的界面就让我苦恼了很久需求:在不定宽高的div中文字垂直居中 div1的宽高 ...
div图片垂直居中如何使div中图片垂直居中
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的淘宝UED 招聘中有这样一道题目: "使用纯CSS ...
如何使img或者div在div中水平垂直居中显示
闲来无事,被人问到如何使img在一个div中垂直居中显示,自己就总结了如下几种方法,供大家参考: 方法一:在box中添加span空元素 <div id="box">&l ...
在Bootstrap4中使用垂直居中
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目.Bootstrap 是一套用于 HTML.CSS 和 JS 开发的开源工具集.利用我们提供的 Sass ...
div在body中水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

html中的垂直居中实现

文字居中

使用line-height

表格法

图片居中

inline-block helper

html中的垂直居中实现相关推荐

最新文章

热门文章