1、absolute，margin: auto

.container {
    position: relative;
}
.content {
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

注意: 當(dāng)沒有指定內(nèi)容塊的具體的高度和寬度時(shí)，內(nèi)容塊會(huì)填滿剩余空間。可以通過使用max-height來限制高度，也可以通過 display:table 來使高度由內(nèi)容來決定，但是瀏覽器支持不是很好。

2、relative，left top 50%，負(fù)margin-left margin-top

.isNegative {
    position: relative;
    width: 200px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -150px;
}

缺點(diǎn):需要知道具體的高度和寬度

3、relative，left top 50%，transform: translate(-50%,-50%)

  .content {
      position: relative;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }

這里translate的百分比是相對(duì)于自身的，所以高度是可變的

4、Table-Cell

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>
 
 
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

注意: 需要添加最內(nèi)層的div，并且給div指定寬度和margin:0 auto;來使div居中。

5、Inline-Block

html

　　

<div class="Center-Container is-Inline">
  <div class="Center-Block">
    <!-- CONTENT -->
  </div>
</div>
 

css

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}
 
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}
 
.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}
 
.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max- calc(100% - 0.25em) /* Only for IE9+ */
}
 

空內(nèi)容也會(huì)占據(jù)一定空間，需要margin-left:-0.25em;來抵消偏移
內(nèi)容塊的最大寬度不能是100%，否則會(huì)把::after的內(nèi)容擠到下一行

6、Flex

html

 <div class="contain">
   <div class="content">
      // content
   </div>
 </div>
 

css

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
 

　　最方便最簡(jiǎn)單的方式，但是要注意瀏覽器的支持

7、display:flex和margin:auto

.box8{
    display: flex;
    text-align: center;
}
    .box8 span{
    margin: auto;
}

8、display:-webkit-box

.box9{
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center；
}

9、display:-webkit-box

這種方法，在 content 元素外插入一個(gè) div。設(shè)置此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮動(dòng)，并顯示在中間。

.floater {
    float:left;
    height:50%;
    margin-bottom:-120px;
}
    .content {
    clear:both;
    height:240px;
    position:relative;
}

優(yōu)點(diǎn)：
適用于所有瀏覽器
沒有足夠空間時(shí)(例如：窗口縮小) content 不會(huì)被截?cái)啵瑵L動(dòng)條出現(xiàn)
缺點(diǎn)：
唯一我能想到的就是需要額外的空元素了

總結(jié)

以上是生活随笔為你收集整理的CSS上下左右居中的几种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。