者：薔薇Nina
原文：https://www.cnblogs.com/wcwnina/p/11297630.html
在CSS里，標(biāo)簽位置居中一直是困擾Web前端的難題。在本文中，我對(duì)這類(lèi)問(wèn)題進(jìn)行了探究和給出了幾點(diǎn)建議，供讀者參考。
1 行內(nèi)標(biāo)簽
1.1 水平居中
在父級(jí)標(biāo)簽中使用 text-align: center。
效果：
1.2 垂直居中
如果是單行，則為該標(biāo)簽設(shè)置行高（line-height）且與其父級(jí)標(biāo)簽 height 相等即可。
效果：
如果是多行，稍微有點(diǎn)麻煩，需要在該標(biāo)簽設(shè)置 display: table-cell 和 vertical-align: middle，在其父級(jí)標(biāo)簽設(shè)置 display: table。
效果：
2 塊標(biāo)簽
2.1 水平居中
方法一：在父級(jí)標(biāo)簽中使用 flex 彈性盒子。
效果：
方法二：在該標(biāo)簽中使用 margin 屬性。
效果：
2.2 垂直居中
在父級(jí)標(biāo)簽中使用 flex 彈性盒子。
效果：
總結(jié)：對(duì)于行內(nèi)標(biāo)簽居中，優(yōu)先考慮文本對(duì)齊（text-align）和顯示單元格（table-cell）；對(duì)于塊標(biāo)簽居中，優(yōu)先考慮顯示彈性盒子（flex）。
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非常相似，也是一種常見(jiàn)的技術(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寫(xiě)的一個(gè)還算好看的登錄界面。
源代碼已上傳，下載地址請(qǐng)點(diǎn)擊：點(diǎn)擊打開(kāi)鏈接
其主要難點(diǎn)在如何使用extjs來(lái)畫(huà)一個(gè)界面，接下來(lái)我們就主要看一下其中的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)入頁(yè)面所需的js和css文件，當(dāng)然還有一個(gè)亮點(diǎn)就是body標(biāo)簽上的 onkeydown事件屬性，主要用于監(jiān)聽(tīng)鍵盤(pán)實(shí)現(xiàn)我們js中的enter鍵提交功能。然后看一下extjs的語(yǔ)言風(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: '還沒(méi)有賬號(hào)？',
- }, {
- // 第二件：正文
- id: 'registerContentLabel',
- xtype: 'label',
- x: 47,
- y: 135,
- text: '這是在注冊(cè)面板下面的正文內(nèi)容。里面的內(nèi)容可以隨便寫(xiě)，比如當(dāng)前我們?cè)僖粋€(gè)窗口下面建立了兩個(gè)面板。而兩個(gè)面板的布局是分別用相對(duì)布局和絕對(duì)布局來(lái)實(shí)現(xiàn)的。相比較而言，我覺(jué)得用絕對(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();
- });
- });
這里要說(shuō)的是：1、注意給屬性加標(biāo)記，能用id就用id，cls只是一個(gè)封裝過(guò)的class，和原生的class還是有區(qū)別的，比如給一個(gè)cls元素的height、padding定義樣式并不起作用。詳見(jiàn)：關(guān)于extjs中的cls ≠ class
2、在ext中建議用絕對(duì)定位，由于它底層是一個(gè)個(gè)的table、div塊，如果用相對(duì)定位的話(huà)偶爾是有偏差的，所以還是絕對(duì)定位方便直接啊。
3、window自帶居中效果，可以利用這一點(diǎn)讓元素在屏幕中居中。但是當(dāng)瀏覽器縮放的時(shí)候，這個(gè)window并不會(huì)動(dòng)，每次都需要重新刷新一下才會(huì)改變一下。所以，在以上代碼的最后我們用給這個(gè)centerWindow添加了一個(gè)窗口自適應(yīng)居中的效果。
