內容簡介
Vertical Center 可讓您輕鬆垂直置中元素。
功能
可獨立垂直置中無限數量的元素
可指定簡單的 CSS/jQuery 選擇器以定位元素
易於使用的管理介面
網頁載入後立即垂直置中所有項目
在元素垂直置中後新增一個類別（有助於 CSS 轉場效果）
完全響應式（會隨視窗大小和方向更改自動更新）
適用於行動裝置
適用於所有現代瀏覽器（包括 IE8）
觸發自訂「垂直居中」事件以強制重新計算
為了增加平滑度，調整視窗大小的事件會有瞬息消失的效果
詳細使用方法請參閱Screenshots。
說明
在 WordPress 管理介面中導航到「設定」>「Vertical Center」。
輸入選擇器和要居中的元素偏移量。
通過點擊「+ 添加更多」和「刪除」按鈕添加/刪除其他元素。
進階
想要手動觸發垂直居中？沒問題。您可以在設定頁面上跳過輸入選擇器，並使用 .initVerticalCenter() 或 .doVerticalCenter() 自己呼叫 jQuery 腳本。 .initVerticalCenter() 方法會設置事件監聽器以便在視窗改變大小時重新計算，而 .doVerticalCenter() 方法會直接進行居中操作，而不附加任何事件：
// 附加事件和居中。
jQuery( '.selector' ).initVerticalCenter();
// 向中心靠齊而不附加事件。
jQuery( '.selector' ).doVerticalCenter();
這兩個功能都可以接受一個可選參數，即偏移量（以像素為單位）：
jQuery( '.selector' ).initVerticalCenter( offset );
jQuery( '.selector' ).doVerticalCenter( offset );
以 20 像素進行偏移計算：
jQuery( '.selector' ).initVerticalCenter( 20 );
功能可鏈接使用。我個人最喜歡使用此外掛的方法是，在需要置中的元素上通過內嵌 style="opacity: 0;" 來保證在 DOM 加載時它們是透明的，然後使用以下代碼淡入它們：
jQuery( '.selector' ).initVerticalCenter().delay( 200 ).fadeTo( 'slow', 1 );
或者，您可以透過 CSS 在不使用代碼的情況下達到相同的效果，只需要使用每個目標元素初始置中後新增的 vc-complete 類別（自版本 1.0.3 中已新增此功能），可能會長這樣：
#target {
opacity: 0;
transition: opacity 0.5s;
}
#target.vc-complete {
opacity: 1;
}
此外掛還向視窗添加了一個名為「verticalcenter」的事件，可讓您輕鬆手動觸發垂直水平置中操作。例如，如果您通過 AJAX 在頁面加入項目，那麼就可以像這樣觸發事件：
jQuery( window ).trigger( 'verticalcenter' );
外掛標籤
開發者團隊
原文外掛簡介
Vertical Center lets you easily vertically center elements.
Features
Center an unlimited number of elements independently
Specify simple CSS/jQuery selectors to target elements
Easy to use admin interface
Items are vertical centered immediately after the page has loaded
Adds a class to each centered element after it has been centered (useful for CSS transition effects)
Fully responsive (automatically updates on resize and orientationchange events)
Works on mobile devices
Works across all modern browsers (including IE8)
Trigger custom ‘verticalcenter’ event to force a recalculation
Debounced resize events for added smoothness
Check out the Screenshots tab for a gif of the plugin in action.
Instructions
Navigate to Settings > Vertical Center in the WordPress admin.
Enter a selector and an offset for the element(s) you want to center.
Add/remove additional elements by clicking the “+ Add More” and “Remove” buttons.
Advanced
Want to trigger the vertical centering manually? No problem. You can skip entering a selector on the settings page and call the jQuery script yourself using either .initVerticalCenter() or .doVerticalCenter(). The .initVerticalCenter() method sets up the event listeners to recalculate if the window is resized, while the .doVerticalCenter() method directly centers without attaching any events:
// Attach events and center.
jQuery( '.selector' ).initVerticalCenter();
// Center without attaching events.
jQuery( '.selector' ).doVerticalCenter();
Both functions take one optional argument, the offset value (as a number of pixels):
jQuery( '.selector' ).initVerticalCenter( offset );
jQuery( '.selector' ).doVerticalCenter( offset );
To offset the calculation by 20 pixels:
jQuery( '.selector' ).initVerticalCenter( 20 );
The functions are chainable. My personal favorite way to use this plugin is to inline style="opacity: 0;" on the elements that I am centering (to guarantee they’ll be transparent when the DOM loads) and then fade them in with something like this:
jQuery( '.selector' ).initVerticalCenter().delay( 200 ).fadeTo( 'slow', 1 );
Or to achieve the same effect with only CSS you can use the vc-complete class that gets added to each target element after the initial centering (added in version 1.0.3), which might look like this:
#target {
opacity: 0;
transition: opacity 0.5s;
}
#target.vc-complete {
opacity: 1;
}
This plugin also adds an event ‘verticalcenter’ to the window, allowing you to easily trigger the vertical centering manually. This is useful if you have added items to the page after it loads via AJAX. You can trigger the event like this:
jQuery( window ).trigger( 'verticalcenter' );
