1.css垂直居中和水平居中怎么設置

讓一個div或者一段文字亦或者一張照片居中顯示的問題，面試的過程中也經常被問到相信大家都日常的布局也經常會用到，回答出個三兩種解決方案亦不是難事但今天我細究了一下，發(fā)現(xiàn)還有新大陸可尋，特意留此博文總結一下，與君分享！。

2.css中垂直水平居中的方式有哪些網易賬號安全

如果你有新的方法，歡迎補充！??????我們先從固定寬高的div開始為方便演示，默認寬高各為100px的div

以下方式全部是水平及垂直居中方法一：padding填充.content{margin: 0 auto;padding: 50px;width: 100px;height: 100px;background-color

4.css 水平居中 垂直居中 水平垂直居中

: red;}優(yōu)點：兼容性非常好缺點：如果父級的高度受到兄弟節(jié)點的影響，這樣自己就不居中了方法二：絕對定位.wrapper{position: relative;}.content{position: 網易賬號安全absolute;

5.垂直居中的css

left: 50%;top: 50%;margin-top: -50px;margin-left: -50px;width: 100px;height: 100px;background-color: red;

6.css垂直水平居中方法

}優(yōu)點：兼容性非常好缺點：需要提前知道div的寬高，實用性偏弱方法三：計算屬性（calc）.content{  margin: calc((100% - 100px) / 2); width: 100px;

7.css垂直水平居中怎么設置

height: 100px;background-color: red; }優(yōu)點：感覺不到網易賬號安全有什么優(yōu)點缺點：不僅需要提前知道div的寬高，而且瀏覽器對calc的屬性支持程度不一，會有兼容問題不推薦使用，建議作為了解。

8.css垂直水平都居中

接下來是不固定寬高的div為方便演示，還是默認寬高各為100px的div方法四：absolute + margin: auto;.wrapper{position: relative; }.content

9.css水平,垂直居中的寫法

{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 100px;height: 100px;background-colo網易賬號安全r

10.css如何實現(xiàn)垂直水平居中

: red;}優(yōu)點：不需要提前知道尺寸，兼容性好缺點：暫時沒有什么要說的，可能理解起來比較麻煩吧解析：1、我們先讓content脫離文檔流，然后設置上右下左四個位置均為02、給它固定寬高，限制大小3、利用margin屬性，均分外邊距

方法四：absolute + transform.content{ position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;

transform: translate(-50%,-50%);background-color: red; }  優(yōu)點：除了不用提前知網易賬號安全道大小好像也沒什么了缺點：兼容性偏弱方法五：父級flex布局.wrapper

{display: flex;justify-content: center;align-items: center;}優(yōu)點：寫法極度簡單明了缺點：就是兼容性偏差，未來它可能是解決居中的王道（個人觀點）

方法六：父級table布局.wrapper{display: table-cell;vertical-align: middle;}.content{margin: 0 auto;}優(yōu)點：寫法極度簡單明了,兼容性極好

缺點：就是有點老了還有一個更古老（有毒）的想法：

valign="middle">說！你們是不是想說:

說實話網易賬號安全，都9012年，誰要是在我的項目里這么干

方法七：偽元素.wrapper{ width: 400px;height: 400px;text-align: center;border: 2px solid blue;}.wrapper:after{

content: ;display: inline-block;height: 100%;vertical-align: middle;}.content{display: inline-block;

vertical-align: middle;width: 100px;height: 100px;background-color: red;}方法八：偽網易賬號安全元素的另外一種實現(xiàn)方式（兄弟節(jié)點）html: