前端開發(fā)之CSS圖片水平、垂直居中顯示

過前端開發(fā)的朋友都知道，要使文字在一個div容器垂直居中顯示是很簡單的事，但是如果是要讓一張圖片在div容器中垂直顯示那就有點傷腦筋了，因為圖片是個置換元素，有些特殊的特性，對于前端開發(fā)的大牛來說還好，解決方法有很多，比如什么利用js啊之類的，但是這些對于初學者來說就有些難度了，今天小編就把自己平時在項目中用的方法分享給大家，給大家一個參考。

其實小編用的方法也不是什么很高端的技術，算是最low的方法吧，但是很實用，能兼容各種瀏覽器，為了演示，小編直接從某寶商家店鋪里拿了一張商品圖來做演示，因為商品圖都是高清無碼的，且還很大，所以我們在CSS中把圖片的高度設置為200px，div容器的高度為300px，完整的代碼如下：

最終的運行效果如下圖：

可以看到，這個圖片在div中水平、垂直都是在正中間，是不是很完美。這個原理也很簡單，就是在div容器中加了個 <i> 標簽并把它的 display 屬性設置為 inline-block（行內塊元素），讓它去撐開div容器的高度，再把圖片的 vertical-align 屬性設置為 middle 就可以垂直居中了，當然這只是個演示，大家在實際的項目中可以利用 max-width、min-width、max-height、min-height 等屬性讓圖片根據(jù)需要自適應，以達到想要的效果。

當然解決方法還有很多種，具體用什么方法需根據(jù)自身頁面布局去權衡，總之沒有最好的，只有最適合的，如果你有更好的方法也可以告訴小編哦，一起交流方法，共同進步。

lexbox

通常首選方法是使用flexbox居中內容。只需三行代碼即可：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非常相似，也是一種常見的技術，尤其是布局中已經使用網(wǎng)格的情況下。與前一種flexbox技術的唯一區(qū)別是它顯示為柵格。

如下代碼：

html:

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

css:

上效果圖：

這是一個用ext3.2.0、js、html、css寫的一個還算好看的登錄界面。

源代碼已上傳，下載地址請點擊：點擊打開鏈接

其主要難點在如何使用extjs來畫一個界面，接下來我們就主要看一下其中的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>

這里面主要是導入頁面所需的js和css文件，當然還有一個亮點就是body標簽上的 onkeydown事件屬性，主要用于監(jiān)聽鍵盤實現(xiàn)我們js中的enter鍵提交功能。然后看一下extjs的語言風格吧：

Ext.onReady(function () {
// 創(chuàng)建“登錄”面板
var loginPanel = new Ext.Panel({
// 設置面板的位置、寬高、樣式
// 注意：此處我用的是相對布局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
},
// 添加表單里面的物品：兩個輸入框
items: [
{
id: "username",
cls: "text_field",
inoutType: 'text',
width: 330,
height: 28,
blankText: '賬號不能為空',
emptyText: '請輸入賬號',
},
{
id: "password",
cls: "text_field",
inputType: 'password',
width: 330,
height: 28,
emptyText: '請輸入密碼',
blankText: '密碼不能為空',
}]
},
{
// 第三件：忘記密碼
id: 'loginForget',
html: "<a href='forget_pwd.html' target='_blank'>忘記密碼？</a>",
},
{
// 第四件：登錄按鈕
id: 'loginBtn',
html: '<button id="btn_login">馬上登錄</button>',
}
],
});
// 創(chuàng)建“注冊”面板
var registerPanel = new Ext.Panel({
// 設置面板的位置、寬高、樣式
// 注意：此處我用的是絕對布局absolute（用于比較兩者的區(qū)別）
id: 'registerPan',
x: 0,
y: 46,
width: 800,
height: 389,
baseCls: '',
layout: 'absolute',
defaults: {
border: false
},
// 添加面板里面的物品
items: [
{
// 第一件：標題
id: 'registerTitleLabel',
xtype: 'label',
x: 47,
y: 50,
text: '還沒有賬號？',
}, {
// 第二件：正文
id: 'registerContentLabel',
xtype: 'label',
x: 47,
y: 135,
text: '這是在注冊面板下面的正文內容。里面的內容可以隨便寫，比如當前我們再一個窗口下面建立了兩個面板。而兩個面板的布局是分別用相對布局和絕對布局來實現(xiàn)的。相比較而言，我覺得用絕對布局會簡單粗暴，更直接，更方便。總之，你們自己體會一下吧。',
}, {
// 第三件：注冊按鈕
id: 'registerBtn',
xtype: 'button',
x: 47,
y: 280,
html: '<button id="btn_register" >馬上注冊</button>'
}],
});
// 創(chuàng)建窗口，從而讓內容達到居中效果
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();
// 添加瀏覽器縮放自動居中效果
Ext.EventManager.onWindowResize(function () {
centerWindow.center();
});
});

這里要說的是：1、注意給屬性加標記，能用id就用id，cls只是一個封裝過的class，和原生的class還是有區(qū)別的，比如給一個cls元素的height、padding定義樣式并不起作用。詳見：關于extjs中的cls ≠ class

2、在ext中建議用絕對定位，由于它底層是一個個的table、div塊，如果用相對定位的話偶爾是有偏差的，所以還是絕對定位方便直接啊。

3、window自帶居中效果，可以利用這一點讓元素在屏幕中居中。但是當瀏覽器縮放的時候，這個window并不會動，每次都需要重新刷新一下才會改變一下。所以，在以上代碼的最后我們用給這個centerWindow添加了一個窗口自適應居中的效果。

在線咨詢

上一篇：如何制作一本可以翻頁的電子畫冊？- 云展網(wǎng)
下一篇：JavaScript代碼怎樣引入到HTML中？

您的項目需求

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

整合營銷服務商

前端開發(fā)之CSS圖片水平、垂直居中顯示

lexbox

Grid

您的項目需求