初學css,對各種居中很是頭疼,這裡特地整理一下.
1.設定 text-align 屬性
例如:
測試標題1css屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。text-align並不控制塊元素自己的對齊，只控制它的行內內容的對齊
總結:1.只能用於塊級元素內容(block containers) 的行內內容(文字,行內元素,行內塊元素)的居中, 對行內元素本身設定是無效的.
例如 測試標題1 這種寫法 就不會在螢幕中居中對齊
但是 當他轉換為塊級元素的時候就又可以居中了 ,或者父元素是塊元素且設定為居中的時候文字(行內元素)也可以居中
例如:
測試標題1
測試標題1
測試標題1
2.該屬性會被子元素繼承
例如:
測試標題1
上圖可以看到 文字的內容已經居中,但是元素並沒有居中.
3.mdn中有個備註 居中元素,不居中文字 的方法 特此註明一下 防止自己忘了
居中乙個塊元素且不居中它的行內內容的標準相容的方法是將它的左、右margin設為auto, 例如：
margin:auto;或margin:0 auto;或margin-left:auto; margin-right:auto;
magin:margin屬性為給定元素設定所有四個（上下左右）方向的外邊距屬性。也就是margin-top，margin-right，margin-bottom，和margin-left四個外邊距屬性設定的簡寫。
magin:auto讓瀏覽器自己選擇乙個合適的外邊距。有時，在一些特殊情況下，該值可以使元素居中。
mdn:
margin和width實現水平居中:magin: 0 auto 就可以實現水平居中
注意:
這種只適合于父元素是body的時候,其他的情況下不行.
mdn中已經不推薦這種magin: 0 auto 來實現水平的方法,
意思 是將 子元素設定為為絕對定位,讓其他的父元素設定為相對定位,再將子元素的margin left 和 right 設定為 auto, left 和right 設定為 0 '
這樣的話子元素就會相對于父元素進行居中對齊
**:
left 和right : 定義了定位元素的左/右外邊距邊界與其包含塊左/右邊界之間的偏移，非定位元素設定此屬性無效。
當設定left 和 right 為 0 或者是相同數值 邊距 例如 (left:1px;right: 1px) 說明左右邊距的權重是一樣的
margin:
注意:1.這種布局下需要注意高度塌陷問題
2.這種寫法相容性比較好,但是比較麻煩,
3.這種寫法 將 top: 0; bottom 0; magin :auto ; 的情況下 也可以設定垂直居中
關於flex 可以看下阮一峰大大的這篇部落格,寫的非常詳細,我這裡就不多廢話了
設定改**
主要是用grid布局中的justify-items 屬性
mdn中的解釋
css 的justify-items屬性為所有盒中的專案定義了預設的justify-self， 可以使這些專案以預設方式沿適當軸線對齊到每個盒子。
同理用align-items 屬性可以實現垂直居中
CSS之水平垂直居中
html div css box要點 已知元素高和寬，將其絕對定位時，top，left定位50 最後將margin top 和 margin left 設為高和寬的一半的負值。box 要點 可以不知道元素高和寬，將其絕對定位時，top，left定位50 最後translate 50 50 即移動相對...
css學習筆記之水平居中
text align 在父元素中設定text align center 實現行內元素 水平居中 若子元素為塊級元素，將子元素設定為 display inline block 使子元素變成行內元素。若要相容ie7 瀏覽器，可使用display inline zoom 1 來達到inline block...
css水平垂直居中對齊方式
css屬性 水平居中 text aligin center 垂直居中 line height height 例子 html div class mb10 line align 我是垂直水平居中對齊的文字哦！div div class mb10 line align span 我是垂直水平居中對齊的內...