css元素居中方法

calx 發(fā)布于2019-08-29 16:38 / 598人閱讀

摘要：寫在前面很多時候我們需要水平居中時候用但我們要知道，這個方法有很大的局限性，它不能對浮動元素和絕對定位元素居中，而且對于其他元素必須在有屬性時才有作用。

寫在前面：很多時候我們需要水平居中時候用margin: 0 auto;但我們要知道，這個方法有很大的局限性，它不能對浮動元素和絕對定位元素居中，而且對于其他元素必須在有width屬性時才有作用。

這里說的居中是水平豎直同時居中，就像下面圖中這樣，而且我們居中的時元素而不是內(nèi)容。(以下所有方法的結(jié)果和下圖一樣，不再附圖)

以下方法如果沒有特殊說明，都是基于下面這個部分：


#parent{
  height: 200px;
  width: 300px;
  border: 1px solid #000;
}
#demo{
  height: 100px;
  width: 60px;
  background: blue;
}

行內(nèi)元素居中（單行）


#parent{
  text-align: center;
}
#demo{
  display: inline-block;
  line-height: 200px;   /*   等于父元素高度   */
}


  Hello

這里應(yīng)注意，text-align在IE8及以上和其他主流瀏覽器只能對行內(nèi)元素居中，但在IE6和IE7中可以對任何元素居中。

利用position定位 知道子元素和父元素大小

方法一

 #parent{
    position: relative;
}
#demo{
  position: absolute;
  top: 50px;  /*    計(jì)算方法: （父元素高度-子元素高度)/2    */
  left:120px;   /*    計(jì)算方法: （父元素寬度-子元素寬度)/2    */
}

方法二

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

僅知道子元素大小

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;  /*   子元素高度的一半   */
  margin-left: -30px;  /*   子元素寬度的一半   */
}

僅知道父元素大小

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 100px;  /*   父元素高度的一半   */
  left: 150px;   /*   父元素高度的一半   */
  transform: translateX(-50%) translateY(-50%);
}

父元素和子元素大小都不知道

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

利用table居中



#parent{
  text-align: center;
}
#demo{
  display: inline-block;
}

利用display居中 display:table-cell

#parent{
  display:table-cell;
  text-align: center;
  vertical-align: middle;
}
#demo{
  display: inline-block;
}

display:flex

#parent{
  justify-content:center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

還有一種用font-size屬性的居中對齊方式，由于只能在IE6，IE7中實(shí)現(xiàn)。這里就把它忽略了。