Something about css vertical centering_html/css_WEB-ITnose

这是我技术博客生涯的第一篇文章，想想还是有点小鸡冻。。。菜鸟的征程现在要开始了

 

学习css的时候经常被各种问题纠结到不要不要的，没办法，只能写写博客帮助整理一下自己的思绪和帮助一下和我遇到同样问题的小伙伴们

 

不知道各位学习css的小伙伴会不会被垂直居中的问题虐的好痛苦，反正我也被虐的挺惨

但是稍微整理一下，感觉好像垂直居中也就那么回事。

 

一，利用line-height

line-height是一个设置行高的一个css样式，一行文字上面的空白+下面的空白=行高

他可以帮助我们解决垂直居中的问题

当一个div中有1行文字（记住：是1行文字）需要垂直居中时，设置line-height=div的height可是使这一行文字垂直居中，但这个办法有点鸡肋，只能用在一行文字上，但是在文本框里面的光标解决上却很有用，现在的主流浏览器chrome，firefox，safari等等等在设置input=“text”时输入文字光标是会自动垂直居中的但是在老古董ie6，ie7，ie8上却会有问题，会变成这样：       很坑有木有？？？没办法这就是ie，这时我们加上line-height=文本框的height可以解决这个问题。

 

 

二，利用table

我们知道vertical-align分别是垂直居中，但是vertical-align只有在table中才能生效，这是我们就可以利用display来解决这个问题

      →  display:table                                                                                                                                                                    

　　

     →diaplay:table-cell           /*使这两个div模仿表格和表格单元，给vertical-align提供一个使用的环境*/

　　　　我要垂直居中！！

　　

At this time, setting vertical-align:middle will take effect (this method can be used for multi-line text), but this method is not well supported on IE

Three, use negative margins

Set position: absolute→top:50%→margin-top: (general - height in div)

Position: The middle point of the absolute movement displacement is in the middle of the block-level element, but the reference of the movement distance is the parent element (50% is 50% of the height of the parent element, not its own 50%), if there are two divs, if the parent div has position:absolute or relative set, then the child div will move with reference to the parent div. If the parent div does not have position:absolute or relative set, then the child div will move with reference to the upper left angle (0.0) to move.

This method can center the entire div vertically

Fourth, use flexible-box (flexible-box)

Telescopic boxes now have two versions: old and new. The new version has a tendency to replace the old version. This article uses the old version of the telescopic box. (The new version of the telescopic box can also be implemented)

Using the telescopic box to solve the vertical centering problem is also a good way, but you need to add -webkit-, -moz-, -ms-, -o- when using it. Wait for the prefix

We also need to use display to put a box container: -webkit-display:box → If the text is arranged horizontally, use: box-align:center / If the text is arranged vertically, use box-pack ：center

Of course, you can also use transform to achieve vertical centering, etc. There are many other ways, but based on my current summary, I will summarize it for the time being. Now that I have arrived at these 4 types, I am a front-end novice, so I ask all front-end experts not to comment.

The above content is original and may not be reproduced without permission