CSS绝对定位元素居中方法

最新推荐文章于 2023-04-12 14:31:51 发布

哇呀呀呀加油

最新推荐文章于 2023-04-12 14:31:51 发布

阅读量172

点赞数

分类专栏：工作文章标签： css js

本文链接：https://blog.csdn.net/weixin_43965439/article/details/108486949

版权

工作专栏收录该内容

10 篇文章 2 订阅

订阅专栏

宽度已知：

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

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

宽度未知：

<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;
}

选择除了第一个以外的其他元素:

p:not(:first-child) {
}

优惠劵

哇呀呀呀加油

关注关注

0
点赞
踩
0

收藏

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

宽度已知：<body> <div> <div id="content"> 居中蓄力中 </div> </div></body>#content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* 要设定宽度 */}
复制链接

扫一扫