CSS居中方法总结

2024年4月23日 200次阅读 来源: wupengyu

水平居中实现方案

确定宽度的元素水平居中

1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。
HTML:

    <body>
      <div class="parent">
        <div class="child">
          center
        </div>
      </div>
    </body>

CSS:

    .child {
      width: 200px;
      margin: 0 auto;
    }

此时检查元素即可即可实现内层的div实现了居中,这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。
2.通过position定位
HTML:

  <div>
    <ul>
      <li>center</li>
    </ul>
  </div>

CSS:

   div {
      float: left;
      width: 100%;
      position: relative;
    }
    ul {
      position: absolute;
      left: 50%;
      width: 200px;
      margin-left: -100px;
    }

不确定宽度的元素居中

1.给子元素设置display: inline-black,父元素设置text-align: center。
HTML:

  <div>
    <p>
      center
    </p>
  </div>

CSS:

    div {
      text-align: center;
    }
    p {
      display: inline-block;
    }

2.当元素被设置float的时候,它的宽度就会被其内容撑开，然后通过positon定位来实现横向居中。
HTML:

  <div>
    <ul>
        <li>center</li>
    </ul>
  </div>

CSS:

    div {
      float: left;
      width: 100%;
      position: relative;
    }
    ul {
      position: relative;
      left: 50%;
      float: left;
    }
    li {
      float: left;
      position: relative;
      right: 50%;
      display: block;
    }

3.flex布局， justify-content:center;主轴居中。align-items:center;交叉轴居中；当设置了flex-direction属性时，主轴的方向会改变。
4.css width: fit-content属性。
5.用css3的transform
HTML:

<div>
    <p class="test">
      center
    </p>
  </div>

CSS:

    div {
      position: relative;
    }
    .test {
      position: relative;
      left: 50%;
      float: left;
      transform: translateX(-50%);
    }

总结一下起来也就是两种方式，其中有比较直接的方式比如，margin: 0 auto，虽然这种方式的兼容性很好，没有副作用，但是这种方式最主要的缺陷是只适用于子元素宽度固定的情况。或者用css3的固有属性flex布局或者 width: fix-content这种方式实现起来简单直接，但在处理一些旧版本的浏览器时，存在很严重的兼容性问题。还有就是间接的实现方式通过position定位，具体思想主要是子元素先移动到父元素二分之一的位置，relative，或者absoulte都可以实现，然后在将子元素向左移动自身二分之一的位置，这种方式有广泛的适用性，但是思路可能比较复杂。

垂直居中实现方案

1.用css3的transform属性，以及postion定位，与上面的水平居中类似，只是改为top:50%,translateY(-50%)即可。
2.设置父元素display: table;子元素dispaly: table-cell,vertical-align: middle;
3.绝对定位
HTML:

  <div class="parent">
    <div class="child">
      nnnnnnn
    </div>
  </div>

CSS:

    .parent {
      position: relative;
      height: 400px;
    }
    .child {
      margin: auto;
      height: 200px;
      position: absolute;
      top:0;
      bottom: 0;
    }

4.单行文本时可以设置height与line－height相同实现文字居中。
5.外边距margin取负数，大小为width/height的一半，再加上top: 50%; left: 50%;

    原文作者：wupengyu
    原文地址: https://segmentfault.com/a/1190000005753005
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞