span 居中_元素居中，你真的用对了么？

元素居中，你真的用对了么？

元素居中有很多方法，在开发的时候用对一个正确的方法，不仅可以给我们的开发省时间省代码，还能达到不错的页面效果，下面就元素居中介绍如下：

一，元素的水平居中

1.text-align

在块级元素<p></p>中让行内元素<span>demo</span>水平垂直居中可以使用

此方法可以让行内块元素，块级元素，和行内元素在一个非行内元素内水平居中显示，已经浮动或定位的元素，不能使用此方法

2.margin: 0 auto

margin一般使用在让元素在body中水平居中，同时也可以让该元素在其他块级元素中水平居中

<table></table>元素也可以使用margin让其水平居中

3.flex+justify-content

首先用display:flex将元素变成容器，之后可以设置项目在主轴上的排列方式

改变属性justify-content的值来设置项目如何居中，前提主轴是水平轴

二，元素的垂直居中

1.line-height

line-height本身是行高，在特殊的情况可以让元素内的子元素或文本垂直居中显示

在只有一行文本的元素中，让文本垂直居中显示可以让行高的值等于元素自身的高

2.flex+justify-content

同上面的水平显示，在基础上将项目排列的方向更改为纵向显示，达到垂直居中显示的目的

3.vertical-align

这种方法，通常使用在以下两种情况

给img加vertical-align属性，作用是改变其与旁边文本的垂直对齐方式

另一种是

在table表格中，让方格的内容垂直居中显示

三，元素水平垂直居中

1.transform+margin: auto

transform设置垂直 居中，margin设置水平居中

3.justify-content+align-items

用这个方法的前提依然是在容器内操作

justify-content设置项目在主轴的居中显示，align-items设置项目在交叉轴上垂直显示

以上是个人总结的几种方法，如果不全面，或有错误，请大牛指正