CSS 垂直 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提供一个使用的环境*/

　　　　我要垂直居中！！

　　

このとき、vertical-align:middle の設定が有効になります (このメソッドは複数行のテキストに使用できます) が、このメソッドは IE では十分にサポートされていません

3、ネガティブエッジを使用します距離

設定位置: 絶対→トップ:50%→マージントップ: (-div の高さの一般)

位置: 絶対の移動変位の中点はブロックレベル要素の中央にありますが、移動距離は親要素です (50% は親要素の高さの 50% であり、それ自体の高さの 50% ではありません)。親 div にposition:absolute またはrelativeが設定されている場合、子 div は親のレベル div を参照して移動します。親 div がposition:absoluteまたはrelativeを設定していない場合は、左上隅(0.0)を参照して移動します。

このメソッドは div 全体を垂直方向に中央揃えにすることができます

4 番目に、フレキシブル ボックス (flexible-box) を使用します

フレキシブル ボックスには新旧 2 つのバージョンがあり、新しいバージョンには次の傾向があります。古いバージョンを置き換えてください。この記事では古いバージョンの伸縮ボックスを使用しています。 (新しいバージョンの伸縮ボックスも実装できます)

垂直センタリングの問題を解決するために伸縮ボックスを使用することも良い方法ですが、-webkit-、-moz-、-ms- などの接頭辞を追加する必要があります。 , -o- 使用するときは

また、display を使用してボックス コンテナを配置する必要があります: -webkit-display: box → テキストが横に配置されている場合は、次を使用します: box-align:center / テキストが縦に配置されている場合、 use box-pack: center

もちろん、transformを使って垂直方向のセンタリングなどを実現することもできます。他にもたくさんの方法がありますが、現時点での私のまとめをもとに、とりあえずこの4つの方法をまとめました. 私はフロントエンドの初心者なので、フロントエンドの専門家の方は文句を言わないでください。

上記のコンテンツはオリジナルであり、許可なく複製することはできません