web前端字体居中_Web前端CSS居中深入解析

许多同鞋都知道，CSS居中一直是行业里比较敏感的话题。为了以后在开发中的使用，源码时代

内联元素的居中方案

水平居中设置：

1.行内元素 设置：text-align:center

2.Flex布局 设置：display:flex:justify-content:center

垂直居中设置：

1.父元素高度确定的单行文本(内联元素) 设置 height = line-height；

2.父元素高度确定的多行文本(内联元素) a:插入 table (插入方法和水平居中一样)，然后设置 vertical-align:middle； b:先设置 display:table-cell 再设置 vertical-align:middle；

块级元素居中方案

水平居中设置：

1.定宽块状元素 设置 左右 margin 值为 auto；

2.不定宽块状元素 a:在元素外加入 table 标签(完整的，包括 table、tbody、tr、td)，该元素写在 td 内，然后设置 margin 的值为 auto； b:给该元素设置 display:inine 方法； c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

CSS代码：

2.利用position:fixed(absolute)属性，margin:auto这个必须不要忘记了;

CSS代码：

3.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

HTML代码：

CSS代码：

4.使用css3的新属性transform:translate(x,y)属性;

CSS代码：

5.最高大上的一种，使用before，after伪元素;

HTML代码：

CSS代码：

6.Flex布局;

总结：

以上就是CSS居中的一些解决方案，大家在看的时候一定要撑握这些，要不然的话，在我们用到的这一块的时候，又没有很好的处理办法。所以呢，我这里就给大家全都总结出来，还有一些奇葩的方法，小编不推荐大家使用。这些方法都是我们比较常见的，所以可以给大家作为一个参考。