資訊專欄INFORMATION COLUMN
摘要：定寬塊狀元素滿足定寬和塊狀兩個條件的元素是可以通過設置左右值為來實現(xiàn)居中的。設置方法改變塊級元素的為類型設置為行內(nèi)元素顯示，然后使用來實現(xiàn)居中效果。
水平居中做前端這一年多來，其實一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態(tài)，從來沒有系統(tǒng)的學習或總結(jié)過，結(jié)果現(xiàn)在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡單的總結(jié)一下，高手繞路。
我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。
這里我們又得分兩種情況：行內(nèi)元素 還是 塊狀元素 ，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。
如果被設置元素為文本、圖片等行內(nèi)元素時，水平居中是通過給父元素設置 text-align:center 來實現(xiàn)的。
塊狀元素當被設置元素為 塊狀元素 時用text-align：center就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
定寬塊狀元素滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現(xiàn)居中的。如：
div{
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置為 auto */
}
不定寬塊狀元素
在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設置居中，比如網(wǎng)頁上的分頁導航，因為分頁的數(shù)量是不確定的，所以我們不能通過設置寬度來限制它的彈性。
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。
改變塊級元素的 display 為 inline 類型（設置為 行內(nèi)元素 顯示），然后使用 text-align:center 來實現(xiàn)居中效果。
與第一種類似，顯示類型設為行內(nèi)元素，進行不定寬元素的屬性設置。
這個就好說啦，子元素相對父元素向右偏移父元素的50%，然后在相對于自身向左偏移自身的50%,完事。
垂直居中我們在實際工作中也會遇到需要設置垂直居中的場景，比如好多報紙的文章標題在左右一側(cè)時，常常會設置為垂直居中，為了用戶體驗性好。
這里我們又得分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。
父元素高度確定的單行文本父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現(xiàn)的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。
line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個文本行內(nèi)容的頂部和底部。
這種文字行高與塊高一致帶來了一個弊端：當文字內(nèi)容的長度大于塊的寬時，就有內(nèi)容脫離了塊。
父元素高度確定的多行文本 1. 利用display: table-cell和vertical-align: middle在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell（設置為表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 并不支持這個樣式,
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115391.html
摘要：關于背景圖片的那些小技巧背景圖片太大沒辦法居中顯示怎么辦想完整顯示圖片如何按比例縮放想要在頁面上顯示兩個空格，應該怎么寫代碼在代碼里寫才行。 CSS簡介 想要制作出好看又高大上的網(wǎng)頁，除了編寫好HTML文件外，CSS的編寫也必不可少。CSS的英文全稱是Cascading Style Sheets，即層疊樣式表。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格...
摘要：因為網(wǎng)頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強制換行由于中文會強制換行，但是因為英文和數(shù)字不會強制換行。 css基礎—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...
摘要：因為網(wǎng)頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強制換行由于中文會強制換行，但是因為英文和數(shù)字不會強制換行。 css基礎—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...
閱讀 2158·2021-09-27 14:04
閱讀 1905·2019-08-30 15:55
閱讀 1721·2019-08-30 13:13
閱讀 1090·2019-08-30 13:07
閱讀 2774·2019-08-29 15:20
閱讀 3271·2019-08-29 12:42
閱讀 3369·2019-08-28 17:58
閱讀 3634·2019-08-28 17:56
