CSS 水平居中

最新推荐文章于 2023-09-20 13:51:42 发布

顾鸟

最新推荐文章于 2023-09-20 13:51:42 发布

阅读量335

点赞数

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

本文链接：https://blog.csdn.net/qq_40881695/article/details/121338373

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. text-align:center

MDN： text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

理解：

父级块级元素使用 text-align:center ，子级行内元素和行内块元素都会居中对齐。
子级块级元素没有设置宽度，会自动继承父级宽度和 text-align:center 属性，此时子级块级元素的宽度和父级块级元素的宽度一致，其中的文字居中对齐（继承了 text-align 属性），所以看起来就好像子级块级元素居中显示了。
子级块级元素设置宽度，其中的文字会居中对齐（继承了 text-align 属性），但是因为宽度的原因，子集块级元素看起来不会居中显示。
子级块级元素设置宽度居中的方法：转化为行内块元素

效果展示：
在这里插入图片描述
代码：

 <style>
      .test {
        width: 300px;
        height: 300px;
        text-align: center;
        background-color: antiquewhite;
      }
      img {
        width: 50px;
        height: 50px;
      }
      .test > div {
        /* width: 50px;
        height: 50px; */
        border: 1px solid black;
      }
      .test > p {
        display: inline-block;
        width: 150px;
        height: 50px;
        background-color: red;
      }
      span {
        border: 1px solid black;
      }
      h2 {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="test">
      <div>我是div</div>
      <p>我是块级元素p</p>
      <!-- <span>我是行级元素span</span> -->
      <h2>我是h2，块级</h2>
      <img src="https://z3.ax1x.com/2021/11/15/I2sYq0.jpg" alt="" />
    </div>
  </body>

2. margin: 0 auto;

理解：
1. 适用于块级元素，不适用于行内元素、行内块元素。
2. 为什么行内元素和行内块元素不适用？因为行内元素和行内块元素宽度是由其内容决定，默认也就没有 margin
3. 为什么使用于块级元素？块级元素默认占据100%的宽度,margin:0 auto的auto是指平分剩余空间,比如宽度为200,父元素的宽度为1000,那么auto就是指水平方向平分剩余的宽度(1000-200/2)
4. margin只控制元素在父元素中的对齐，而不会影响自身的内容（即文本内容），如果想要文本居中可以使用 text-align:center;
5. 行内元素和行内块元素居中，可以转化为块级元素

效果展示
在这里插入图片描述
代码

 <style>
      .test {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
      }
      img {
        /* display: block; */
        width: 50px;
        margin: 0 auto;
      }
      .test > div {
        width: 100px;
        border: 1px solid black;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="test">
      <div>我是div</div>
      <img src="https://z3.ax1x.com/2021/11/15/I2sYq0.jpg" alt="" />
    </div>
  </body>

3. flex 布局

理解：

注意，设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
适用于子级元素是块级、行内块、行内元素
在父级元素上使用 display:flex; justify-content: center;
子级元素是块级元素或行内块元素需要定义宽度，如果没有定义高度，会继承父级高度；如果没有定义宽度，会由内容决定。
更加详细信息请参考链接：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

效果展示
在这里插入图片描述
代码

  <style>
      .test {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
      }
      /* img {
        width: 50px;
        height: 50px;
      } */
      .test > div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="test">
      <div>我是div</div>
      <!-- <img src="https://z3.ax1x.com/2021/11/15/I2sYq0.jpg" alt="" /> -->
      <!-- <span>1111</span> -->
    </div>
  </body>