先上圖

今天遇到一個問題，具體場景是在一個網頁中用戶設置完流程後，比如是一個三步的流程圖，如上圖（上一部分），需要在另一個界面顯示出來，並且垂直水平居中，這裏說一下思路，具體計算大家可以自己來進行。

當然還會根據返回流程的數量（有時是需要多個流程顯示出來）來確定它的y值,，流程圖數據返回的就是各個流程中的每個節點坐標（x坐標和y坐標）,這裏先說如何處理x坐標

x坐標確定方法:

首先假設返回的流程圖是一個，並且有三個節點，這裏需要計算第二個節點和第三個節點分別與第一個系欸但的x坐標差值，然後放入一個數組disArr中，並且需要知道這三個節點中的最大值和最小值，然後最大值減去最小值得到最大間距disMax，接下來切換到要顯示的大屏幕這邊，比如大屏幕寬是800px，首先給大屏幕確定一個起始點x坐標，比如是50px，然後可以得到要顯示區域的寬度為700px，這時候用剛才的disMax/700可以知道一個縮放比例，如圖中是3.5，這個時候將disArr數組進行循環，每次循環時候需要乘以那個縮放比例，再加上大屏幕起始點x坐標，於是就可以得到再大屏幕上的x坐標了。

y坐標確定方法:

這裏我會返回數據流程的數量來確定，由於大屏幕空間有限，這裏給它規定最多顯示3個，然後剩下的就行一次切換，如果不足3個，有幾個，顯示幾個，並且還要符合垂直居中，這裏我是根據數據流程數量來動態生成相對應數量的div用於盛放流程圖，然後每個節點的y坐標其實就是對應div的高度/2，（這裏忽略圖標的大小不計），然後就可以做到垂直居中了。

當然具體的尺寸大家根據自己的需要進行調整，如有問題，歡迎大家留言反饋！

動態居中方法