CSS的各种居中

最新推荐文章于 2025-05-25 18:34:15 发布

加油加油加油啊

最新推荐文章于 2025-05-25 18:34:15 发布

阅读量670

点赞数

CC 4.0 BY-SA版权

分类专栏： web css

本文链接：https://blog.youkuaiyun.com/weixin_42615719/article/details/83714554

web 同时被 2 个专栏收录

24 篇文章

订阅专栏

css

2 篇文章

订阅专栏

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。

注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。

从简单到复杂的方法：

********************************************************************************************************简单法

1、 margin设为auto

margin-left和margin-right都设为auto (width不能为100%)

只能进行水平的居中，且对浮动元素或绝对定位元素无效

div宽度设定(除100%) + margin: 0 auto；则该div下的子元素可以按百分比分割父元素实现浮动居中

2、 text-align:center

只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中

IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的

元素的align="center"几乎对所有元素都适用，太牛掰了。

3、line-height让单行的文字垂直居中（不常用）

把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

4、fit-content属性

配合margin：auto；用来设置元素居中如：html { width: fit-content; }

该法比较叼，可消除右边留白，秒杀min-width右边留白问题

该属性还可以包裹内容

5、表格居中

如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。

如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。

  <table >
    <tr >
      <td  align="center" valign="middle" height="200" width="200" style="border: 1px solid red; vertical-align: top;"> <!--加入text-align: center之后只对ie6,7有效，其他的不仅无效，还会导致align="center"也无无效<!-->
        <div style="width: 100px; height:100px; background:#000;"></div>
      </td>
    </tr>
  </table>

vertical-align: top;不加或者改为vertical-align: middle;都会垂直居中的 ==> style中css属性权力大于valign="middle"

在ie6、7中可以通过css的text-algin来控制表格内容的水平方向的对齐，无论内容是行内元素还是块状元素都有效。

但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效，只能用表格自有的align属性。

6、display:table-cell

对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：

  <div style="display:table-cell; vertical-align:middle; text-align:center; width:200px; height:200px; border:1px solid red;">
    <div style="display:inline-block; width:50px; height:50px; background:#03F;"></div>
  </div>

display:inline-block; 而不能设为display:inline;

但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

************************************************************************************************相对不简单法

7、绝对定位居中法①

此法只适用于那些我们已经知道它们的宽度或高度的元素。（宽度或高度已知的元素）

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

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

<style>
body {
  margin: 0;
  padding: 0;
}
.parent {
  width: 200px; height: 200px; border: 1px solid red;
  position: relative; /* 没有的话绝对定位的子元素会脱离，会以文档为父元素移动 */
}
.child {
  width: 100px; height: 100px; background: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px; /* 负的元素宽度的一半：100/2=50 */
  margin-top: -50px;  /* 负的元素高度的一半：100/2=50 */
}
</style>

如果子元素设置绝对定位（absolute），父元素需要设置相对定位(relative)，否则子元素就不知道会飘到哪去了。

运行效果：

如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。

8、绝对定位居中法②

此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。

下面用一段代码来了解这种方法：

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

<style>
body {
  margin: 0;
  padding: 0;
}
.parent {
  width: 200px; height: 200px; border: 1px solid red;
  position: relative; /* 没有的话绝对定位的子元素会脱离，会以文档为父元素移动 */
}
.child {
  width: 100px; height: 100px; background: #000; /* 宽度与高度必须是固定的 */
  position: absolute;
  left: 0; right: 0; /* left与right必须配对出现来控制水平方向 */
  top: 0; bottom: 0; /* top与bottom必须配对出现来控制垂直方向 */
  margin: auto; /* 这句也是必不可少的 */
}
</style>

运行效果：

这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移，大家可以自己去尝试。

9、浮动配合相对定位

浮动元素怎么水平居中，并且不需要知道需要居中的元素的宽度。

浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。

优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；

缺点是需要一个多余的元素来包裹要居中的元素。

看下代码：

<body>
  <div class="parent">
    <div class="wraper">
      <div class="child">我水平居中了啊</div>
    </div>
    <div class="wraper" style="margin-top: 20px;">
      <div class="child">宽度不同了啊</div>
    </div>
    <div class="wraper" style="margin-top: 20px;">
      <div class="child">确实</div>
    </div>
  </div>
</body>

<style>
  body {
    margin: 0;
    padding: 0;
  }

  .parent {
    width: 300px;
    height: 200px;
    border: 1px solid red;
  }

.wraper { /* 浮动居中需要有这么一个包裹的元素，要浮动的就是这个元素 */
  float: left; /* 在这个包裹元素上进行浮动，让他自适应内容的宽度 */
  position: relative;
  left: 50%; /* 相对定位到父元素宽度一半的地方 */
  clear: both;
}
  .child { /* 这才是真正要居中的元素 */
    border: 1px solid blue;
    position: relative; /* 在这个元素上进行相对定位 */
    left: -50%; white-space: nowrap; /* 向左偏移本身的一半的宽度，正好就居中了 */
  }
</style>

运行效果：