CSS絕對定位元素居中的幾種方法

CSS居中絕對定位元素的方法,有很多種,下面是我收集的幾種
1,div寬度未知1

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      沒有寬度<br />
      照樣居中,嘿嘿嘿
    </div>
  </div>
</body>

2,div寬度未知2(ps:此方法適合ie8以上的瀏覽器)

<div class="outer">
    <div class="inner">居中<br/>蓄力中</div>
</div>

.outer {
    position: relative; /* or absolute */
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

3,div寬度已知

<body>
  <div>
    <div id="content">
      居中蓄力中
    </div>
  </div>
</body>

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* 要設定寬度 */
}

轉載鏈接爲https://www.cnblogs.com/skura23/p/6530556.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章