一、窗體居中

position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */

簡析：

　　position:固定位置顯示（absolute|fixed）；

　　　　【absolute：窗口大小由上層position為absolute、fixed、relative的子父關系窗口決定；fixed：窗口大小由上層層position為fixed的子父關系窗口決定】

　　top,right,bottom,left:設置偏移量（<value>|auto）；

　　　　【設置為auto時，表示窗口在該方向不居中顯示；如：left:auto,則窗口在水平位置不居中顯示】

　　margin:自適應布局（auto）;

　　　　【窗口只會在都為auto的方向上居中】

　　height,widht:可設置，也可不設置（<value>|auto）；

　　　　【不設置則由top,right,bottom,left決定大小】

二、文字、圖片混合自適應居中

.nav { position: relative;float: left;width: 220 px;height: 45 px;cursor: pointer;line - height: 45 px;text - align: center;vertical - align: middle;color: #fff;font - size: 18 px;font - weight: 600; } .nav.nav - item { position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;height: 25 px;line - height: 25 px;display: table - caption; }.nav span { position: relative;top: 0;bottom: 0;height: 25 px;padding - left: 30 px;display: inline - block; }.nav img { position: absolute;top: 0;left: 0;width: 25 px;height: 25 px;z - index: 10 }

簡析：

　　.nav:限制窗口大小；

　　　　【text-align:限制span水平居中】

　　.nav-item:控制內容垂直居中；

　　　　【display:限制內容并排顯示】

　　.nav span:限制圖片顯示范圍；

　　　　【padding-left:為圖片留下顯示空間；display:適應顯示】

　　.nav img:限制圖片大小與顯示位置；

總結

以上是生活随笔為你收集整理的自适应居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。