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
<div class="outer">
    <div class="inner">居中<br/>蓄力中</div>
</div>

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}
ps:此方法适合ie8以上的浏览器

 

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; /* 要设定宽度 */
}
CSS绝对定位元素居中的几种方法
版权声明:若无特殊注明,本文皆为《 傲世零零 》原创,转载请保留文章出处。
本文链接:CSS绝对定位元素居中的几种方法 http://www.wangjunjiang.com/?post=137
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗

评论信息框

吃奶的力气提交吐槽中...