css设置盒子水平居中 magin 0 auto失效原因

Cirrod

已于 2022-08-26 09:48:58 修改

阅读量717

点赞数 2

分类专栏： CSS 文章标签：前端 html css

于 2022-08-12 20:38:06 首次发布

本文链接：https://blog.youkuaiyun.com/h18377528386/article/details/126270754

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

1.块级盒子没有指定宽度
解决：设置width

2.浮动、绝对定位、固定定位的盒子失效
解决办法：①利用css3新增的transform translate属性

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      position: fixed;
      top: 0;
      left: 50%;
      width: 100px;
      height: 50px;
      background-color: red;
      transform: translateX(-50%);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

3.行内元素失效
解决方法：①设置display:block；②给定要居中的行内元素的宽度。
案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  span {
    display: block;
    width: 100px;
    margin: 0 auto;
    background-color: red;
  }
</style>

<body>
  <span>1111</span>
</body>

</html>