平時整理的css水平垂直居中

水平垂直居中

Learn more here

掘金-CSS的垂直居中和水平居中總結

16種方法實現水平居中垂直居中

水平居中

1.行內元素（inline element）, 給其父元素設置 text-align:center （適用行內元素）

什麼是行內元素，塊級元素

inline element
也叫內聯元素、內嵌元素等；行內元素通常都是基於語義級(semantic)的基本元素，只能容納文本或其餘內聯元素，常見內聯元素 「a」。好比 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內元素。
複製代碼

2.塊級元素（block element）, 該元素設置 margin:0 auto便可.只有塊級元素才生效（讓整個塊元素居中）

margin 0 auto與text-align:center的區別

text-align:center設置爲文本或img標籤等一些內聯對象（或與之相似的元素）的居中。margin:0 auto是設置塊元素（或與之相似的元素）的居中。
複製代碼

圖片的水平居中

咱們設置圖片標籤img {margin:0 auto;} ，咱們就犯了一個小錯誤，img類於內聯對象，不能夠設置圖片img標籤的margin屬性，若是你必定想要設置，那麼首先要將它的屬性轉變爲塊元素，以下面的代碼：

img {
    display:block;
    margin:0 auto;
}
複製代碼

3.在一個盒子裏面，讓一個有固定寬高的盒子實現水平居中：

display: block;  /* 轉化成爲塊級元素 */
magin: auto;
複製代碼

4.絕對定位元素的居中實現

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 寬度的一半 */
}
複製代碼

上面的寫法須要嚴格知道盒子的寬高(侷限性)，因此有了下面的寫法(手機web開發可忽略,E10+以及其餘現代瀏覽器才支持)

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%爲自身尺寸的一半 */
}
複製代碼

總結下 ，margin:auto實現絕對定位元素的居中（水平垂直居中）

.element {
    width: 600px; height: 400px;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了這個就自動居中了 */
}
複製代碼

垂直居中

1.若元素是單行文本, 則可設置 line-height 等於父元素高度

.element {
    line-height: 10px;
    height:10px;
}
複製代碼

2.若元素是行內塊級元素（行內元素的一種）

.element {
    height:10px;
    line-height:10px;
    display: inline-block;
    vertical-align: middle;
}
複製代碼

3.塊級元素（元素高度固定）

.element {
    width: 600px; height: 400px;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了這個就自動居中了 */
}
複製代碼

4.很普通的一種垂直居中

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
   }
   .parent::after{
    content:'';
    height:100%;
   }
複製代碼

flex彈性佈局實現水平垂直居中

1.實現

用flex佈局的水平垂直居中特別方便，想要進一步瞭解Flex彈性佈局請參考Flex 佈局教程：語法篇和 Flex 佈局教程：實例篇

flex的居中

.element {
  .display: flex;
  align-items：center;   /* 垂直方向上的對齊方式； */
  justify-content：center;  /* 水平方向上的對齊方式 */
}
複製代碼

2.注意點

align-items：center;(垂直)和justify-content：center;(水平)不是固定不變的，根據flex佈局的主軸方向而定(默認水平方向)，主軸方向爲垂直，原先的水平居中屬性會實現一個垂直居中(注意點)。

關注公衆號，有更多驚喜->