有关各种居中的问题总结：

野性酷女 2022-07-11 15:18 210阅读 0赞

最近一直在看有关Javascript相关的概念，对闭包什么有了更深的认识。不过有天突然对css各种居中产生了兴趣，于是便去研究了一下，今天来更新下博客。

当然最先开始我们还是抛出一个问题，居中使我们要经常面对的一个问题，当然我们平时解决它的办法也很多，今天我们就来看一下有关居中的奇淫技巧，以便我们更好的去工作学习。

**1. margin:0 auto;**  
该方法适用于各种块级元素的居中。但是当盒子进行浮动，或者绝对定位之后，该居中变不在适用。

**2. text-aligin:center;**

对文本，图片，行内元素进行居中，我们也可以设置块级元素的display:inline-block;  
如下图：

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

**3 line-height: 文字居中 文字在行内居中 或者父元素确定的单行文本居中**

**4 使用表格居中：**

我们过去常常会适用表格布局 （表格中 align=”center” valign=”middle” 一个水平居中一个垂直居中）  
这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。。

**当然我们可以拓展一下：（我们可以将一个需要居中的盒子将它变成表格，然后适用它自带的属性。通过display:table-cell 来把它模拟成一个表格单元格）**

效果如下图：

![这里写图片描述][SouthEast 2]

![这里写图片描述][SouthEast 3]

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

具体效果如下图：

![这里写图片描述][SouthEast 4]

![这里写图片描述][SouthEast 5]

[SouthEast]: /images/20220711/810104c6f8234f87a9bb342297315bd0.png
[SouthEast 1]: /images/20220711/93bb047abf7e44f792872b65b1d5d49c.png
[SouthEast 2]: /images/20220711/5d2f776302cc4a9b8371d4b09f58bcde.png
[SouthEast 3]: /images/20220711/d68c5cd78c094e3db829062f0c496f9c.png
[SouthEast 4]: /images/20220711/aeddfac1d5e1491db0fa12510d84b6c3.png
[SouthEast 5]: /images/20220711/c5ed92d365c84ea6b3111094b1d0f544.png