css定位元素的几种居中方式

最新推荐文章于 2024-09-14 08:45:00 发布

jafari

最新推荐文章于 2024-09-14 08:45:00 发布

阅读量2.3k

点赞数

文章标签： web前端 css

本文链接：https://blog.csdn.net/weixin_41574213/article/details/78960568

版权

前端开发，定位元素居中问题。

1.定位元素宽高不知情况

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      高度不清<br />
      照样居中
    </div>
  </div>
</body>

2.第二种定位元素未知宽度情况（适用于ie8以上）

<div class="father">
    <div class="son">我要居中</div>
</div>

.father{
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    background:red;
}

.son{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    background:yellow;
}

3.定位元素已知宽度情况

<body>
  <div>
    <div id="content">
      我要居中
    </div>
  </div>
</body>

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