過前端開發(fā)的朋友都知道，要使文字在一個(gè)div容器垂直居中顯示是很簡(jiǎn)單的事，但是如果是要讓一張圖片在div容器中垂直顯示那就有點(diǎn)傷腦筋了，因?yàn)閳D片是個(gè)置換元素，有些特殊的特性，對(duì)于前端開發(fā)的大牛來說還好，解決方法有很多，比如什么利用js啊之類的，但是這些對(duì)于初學(xué)者來說就有些難度了，今天小編就把自己平時(shí)在項(xiàng)目中用的方法分享給大家，給大家一個(gè)參考。
其實(shí)小編用的方法也不是什么很高端的技術(shù)，算是最low的方法吧，但是很實(shí)用，能兼容各種瀏覽器，為了演示，小編直接從某寶商家店鋪里拿了一張商品圖來做演示，因?yàn)樯唐穲D都是高清無碼的，且還很大，所以我們?cè)贑SS中把圖片的高度設(shè)置為200px，div容器的高度為300px，完整的代碼如下：
最終的運(yùn)行效果如下圖：
可以看到，這個(gè)圖片在div中水平、垂直都是在正中間，是不是很完美。這個(gè)原理也很簡(jiǎn)單，就是在div容器中加了個(gè) <i> 標(biāo)簽并把它的 display 屬性設(shè)置為 inline-block（行內(nèi)塊元素），讓它去撐開div容器的高度，再把圖片的 vertical-align 屬性設(shè)置為 middle 就可以垂直居中了，當(dāng)然這只是個(gè)演示，大家在實(shí)際的項(xiàng)目中可以利用 max-width、min-width、max-height、min-height 等屬性讓圖片根據(jù)需要自適應(yīng)，以達(dá)到想要的效果。
當(dāng)然解決方法還有很多種，具體用什么方法需根據(jù)自身頁面布局去權(quán)衡，總之沒有最好的，只有最適合的，如果你有更好的方法也可以告訴小編哦，一起交流方法，共同進(jìn)步。
lexbox
通常首選方法是使用flexbox居中內(nèi)容。只需三行代碼即可：display:flex，然后使用 align-items:center 和 justify-content:center 將子元素垂直和水平居中。
如下代碼：
html：
<div class="flexbox-centering">
<div>Centered content.</div>
</div>
css：
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
Grid
使用grid(網(wǎng)格)與flexbox非常相似，也是一種常見的技術(shù)，尤其是布局中已經(jīng)使用網(wǎng)格的情況下。與前一種flexbox技術(shù)的唯一區(qū)別是它顯示為柵格。
如下代碼：
html:
<div class="grid-centering">
<div class="child">Centered content.</div>
</div>
css:
上效果圖：
這是一個(gè)用ext3.2.0、js、html、css寫的一個(gè)還算好看的登錄界面。
源代碼已上傳，下載地址請(qǐng)點(diǎn)擊：點(diǎn)擊打開鏈接
其主要難點(diǎn)在如何使用extjs來畫一個(gè)界面，接下來我們就主要看一下其中的html和js吧：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>登錄界面</title>
- <link rel="stylesheet" type="text/css" href="ext3.2.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="ext3.2.0/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="ext3.2.0/ext-all.js"></script>
-
- <script type="text/javascript" src="login.js"></script>
- <script type="text/javascript" src="loginToDo.js"></script>
-
- <link rel="stylesheet" type="text/css" href="login.css"/>
- </head>
- <body onkeydown="keyLogin(event);">
- </body>
- </html>
這里面主要是導(dǎo)入頁面所需的js和css文件，當(dāng)然還有一個(gè)亮點(diǎn)就是body標(biāo)簽上的 onkeydown事件屬性，主要用于監(jiān)聽鍵盤實(shí)現(xiàn)我們js中的enter鍵提交功能。然后看一下extjs的語言風(fēng)格吧：
- Ext.onReady(function () {
-
- // 創(chuàng)建“登錄”面板
- var loginPanel = new Ext.Panel({
- // 設(shè)置面板的位置、寬高、樣式
- // 注意：此處我用的是相對(duì)布局relative（用于比較兩者的區(qū)別）
- id: 'loginPan',
- x: 363,
- y: 0,
- width: 396,
- height: 480,
- baseCls: '',
- defaults: {
- border: false
- },
- // 添加面板里面的物品
- items: [
- {
- // 第一件：logo圖
- id: 'loginLogo',
- height: 160,
- frame: false,
- bodyStyle: 'padding-top:10px',
- html: '<img src="images/fly_icon.png">'
- },
- {
- // 第二件：登錄的表單
- id: 'loginForm',
- defaultType: 'textfield',
- frame: false,
- defaults: {
- allowBlank: false
- },
- // 添加表單里面的物品：兩個(gè)輸入框
- items: [
- {
- id: "username",
- cls: "text_field",
- inoutType: 'text',
- width: 330,
- height: 28,
- blankText: '賬號(hào)不能為空',
- emptyText: '請(qǐng)輸入賬號(hào)',
- },
- {
- id: "password",
- cls: "text_field",
- inputType: 'password',
- width: 330,
- height: 28,
- emptyText: '請(qǐng)輸入密碼',
- blankText: '密碼不能為空',
- }]
- },
- {
- // 第三件：忘記密碼
- id: 'loginForget',
- html: "<a href='forget_pwd.html' target='_blank'>忘記密碼？</a>",
- },
- {
- // 第四件：登錄按鈕
- id: 'loginBtn',
- html: '<button id="btn_login">馬上登錄</button>',
- }
- ],
- });
-
- // 創(chuàng)建“注冊(cè)”面板
- var registerPanel = new Ext.Panel({
- // 設(shè)置面板的位置、寬高、樣式
- // 注意：此處我用的是絕對(duì)布局absolute（用于比較兩者的區(qū)別）
- id: 'registerPan',
- x: 0,
- y: 46,
- width: 800,
- height: 389,
- baseCls: '',
- layout: 'absolute',
- defaults: {
- border: false
- },
- // 添加面板里面的物品
- items: [
- {
- // 第一件：標(biāo)題
- id: 'registerTitleLabel',
- xtype: 'label',
- x: 47,
- y: 50,
- text: '還沒有賬號(hào)？',
- }, {
- // 第二件：正文
- id: 'registerContentLabel',
- xtype: 'label',
- x: 47,
- y: 135,
- text: '這是在注冊(cè)面板下面的正文內(nèi)容。里面的內(nèi)容可以隨便寫，比如當(dāng)前我們?cè)僖粋€(gè)窗口下面建立了兩個(gè)面板。而兩個(gè)面板的布局是分別用相對(duì)布局和絕對(duì)布局來實(shí)現(xiàn)的。相比較而言，我覺得用絕對(duì)布局會(huì)簡(jiǎn)單粗暴，更直接，更方便。總之，你們自己體會(huì)一下吧。',
- }, {
- // 第三件：注冊(cè)按鈕
- id: 'registerBtn',
- xtype: 'button',
- x: 47,
- y: 280,
- html: '<button id="btn_register" >馬上注冊(cè)</button>'
- }],
-
- });
-
- // 創(chuàng)建窗口，從而讓內(nèi)容達(dá)到居中效果
- var centerWindow = new Ext.Window({
- baseCls: '',
- width: 800,
- height: 480,
- layout: 'absolute',
- closable: false,
- draggable: false,
- resizable: false,
- shadow: false,
- border: false,
- items: [registerPanel, loginPanel],
- });
-
- // 顯示窗口
- centerWindow.show();
-
- // 添加瀏覽器縮放自動(dòng)居中效果
- Ext.EventManager.onWindowResize(function () {
- centerWindow.center();
- });
- });
這里要說的是：1、注意給屬性加標(biāo)記，能用id就用id，cls只是一個(gè)封裝過的class，和原生的class還是有區(qū)別的，比如給一個(gè)cls元素的height、padding定義樣式并不起作用。詳見：關(guān)于extjs中的cls ≠ class
2、在ext中建議用絕對(duì)定位，由于它底層是一個(gè)個(gè)的table、div塊，如果用相對(duì)定位的話偶爾是有偏差的，所以還是絕對(duì)定位方便直接啊。
3、window自帶居中效果，可以利用這一點(diǎn)讓元素在屏幕中居中。但是當(dāng)瀏覽器縮放的時(shí)候，這個(gè)window并不會(huì)動(dòng)，每次都需要重新刷新一下才會(huì)改變一下。所以，在以上代碼的最后我們用給這個(gè)centerWindow添加了一個(gè)窗口自適應(yīng)居中的效果。
