做H5时，经常会遇到文字和图像的垂直居中问题。 我尝试了不同的方法，但我感觉这是困扰前端程序员的课题。 在网上也能找到很多文章，本文列举了我使用的一些方法。
在字符中央使用line-height line-height是最简单的方法。 也就是说，将线高度和div的高度设定为相同。 但是，这种使用是有限制的，高度只能使用绝对值，不能使用百分比等相对值。
HTML:
divthisisverticalaligntext/div CSS :
div { height: 100px； line-height: 100px； }对于多行字符，请执行以下操作：
HTML:
divspanverticallycenteredtext/span/div CSS :
div{ height: 200px； line-height: 200px； }span{ display: inline-block； vertical-align :中间； line-height: 14px； /* -- adjust this */}表示法允许使用html的几个标签实现垂直居中。 例如，表是可引用的。
HTML:
divclass=' ext-box ' style=' width :100 %； height :100 % ' divclass=' in-box ' span确定/span /div/div CSS:
. ext-box { display: table； }.in-box { display : table-cell； vertical-align :中间； 文本照明3360中心； }在上述格式中，外部div被设置为表格显示，内部div被更改为表格单元格，并使用单元格中垂直居中的属性定位在字符的中心。
附上两个stackoverflow以文本为中心的帖子。 值得借鉴：
isitpossibletoverticallyaligntextwithinadiv？
csscentertext (水平和垂直) inside a div块
在将图像居中之前，曾尝试使用表示法设置图像的居中，但偶尔可能无法精确居中。 我不知道为什么，我得试试别的想法。
inline-block helper通过在inline-block中对齐属性来实现图像的居中。
HTML:
divclass=frame span class=' helper '/span img src=' http://jsfiddle.net/img/logo.png ' height=21///div CSS 3366
. frame { height: 25px；/* equalsmaximageheight */width :160 px； border : 1px固态红色； white-space: nowrap； 文本照明3360中心； 边距： 1em 0； }.helper { display : inline-block； height: 100%； vertical-align :中间； }img { background: #3A6F9A； vertical-align :中间； 最大高度： 25px； 最大宽度： 160 px； }在上面的代码中，首先将helper设置为占据frame的高度。 此时，另一个inline-block标签span可以使helper与中央对齐，实现图像的中央。 当然，其中的frame也必须是固定高度值。
照片位于中央，目前只尝试了一种使用方法。 附上stackoverflow的帖子作为参考。
howtoverticallyalignanimageinsidediv
可见，对齐的各种方法一般要求高度一定。 在移动WEB开发中，宽度固定手机的屏幕尺寸，但高度一般会向下延伸。 但是，我一般的处理方法是尽量不滚动画面。 最好在一个屏幕上看到所有的信息。 所以，在设计的时候，尽量放宽布局，就是要留有余地。 在不同的屏幕上，这些固定高度控件不会因挤压布局而重叠。
前端开发中确实需要考虑的细节太多了。 继续积累吧。