CSS 垂直居中方式二

<div id="parent">
<!-- 定義子級元素 -->
<div id="child">居中布局</div>
</div>

過以下CSS樣式代碼實現水平方向居中布局效果

.parent{position:relative;}
.child{position: absolute;top: 50%;transform: translateY(-50%)}

優點:

父級元素是否脫離文檔流, 不影響子級元素垂直居中效果

缺點:

transform屬性是CSS3中新增屬性, 瀏覽器支持情況不好

文給大家分享的是：畫APP原型時，設置手機殼為頁面背景，內嵌框架為手機屏幕（原型的內容區）的情況下，保持手機殼、手機屏幕與頁面之間，左右/垂直居中對齊（兼容不同尺寸的電腦屏幕）

一、頁面背景的設置

1. 設置頁面居中對齊；

2. 設置頁面背景顏色（灰背景色值：#F5F5F5，黑背景色值：#121212，或自行選擇）；

3. 導入手機殼為頁面背景圖片；

4. 設置頁面背景垂直居中對齊；

5. 設置頁面背景左右居中對齊；

6. 設置頁面背景不重復。

二、內嵌框架（手機屏幕）的設置

1、在頁面中拖入一個內嵌框架（手機屏幕，即顯示原型的內容區，下同），命名為【Frame】，設置寬度為：375px，高度為：667px；

2、選擇內嵌框架（手機屏幕）默認打開的頁面（在瀏覽器中預覽時，該內嵌框架默認顯示的頁面）；

3、隱藏內嵌框架（手機屏幕）的邊框；

4、框架滾動條選擇【從不顯示】。

三、添加頁面事件-設置內嵌框架（手機屏幕）垂直居中對齊

前面已設置頁面居中對齊。

所以預覽時，內嵌框架（手機屏幕）會兼容不同寬度的電腦屏幕，左右居中顯示在手機殼中。

為兼容不同高度的電腦屏幕，讓內嵌框架（手機屏幕），垂直居中顯示在手機殼中，

接下來還要添加頁面事件：

窗口尺寸改變時，移動內嵌框架（手機屏幕）的頭部的縱坐標值（y坐標值）

=（頁面高度-內嵌框架高度）/2

=(Window.height-frame.height)/2

=內嵌框架（手機屏幕）與頁面垂直居中對齊

完成后，可以嘗試將頁面放大或縮小，手機殼及原型內容始終會保持左右/垂直居中對齊。

本文結束了哈。

作者：亮亮，公眾號：Axure產品原型

本文由 @亮亮原創發布于人人都是產品經理，未經許可，禁止轉載

家好，今天給大家介紹一款，帶圖標的垂直導航菜單的html頁面源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

點擊每個按鈕時，都有切換特效，并顯示按鈕的說明，看起來非常不錯（圖2）

圖2

代碼完整，需要的朋友可以下載（圖3）

圖3

本源碼編碼：10148，需要的朋友，點擊下面的鏈接后，搜索10148，即可獲取。

就愛UI - 分享UI設計的點點滴滴

在線咨詢

上一篇：WPS演示中插入Flash的方法
下一篇：改進全屏媒體體驗，Meta Quest瀏覽器31.4

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商