CSS绝对定位元素居中的几种方法

最新推荐文章于 2024-04-02 14:52:40 发布

皮皮猴我们走

最新推荐文章于 2024-04-02 14:52:40 发布

阅读量802

点赞数 1

分类专栏： css 文章标签： css

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

皮皮猴我们走

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS绝对定位元素居中的几种方法

CSS居中绝对定位元素的方法，有很多种，下面是我收集的几种1，div宽度未知1<body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> 没有宽度&lt...
复制链接

扫一扫