元素居中,你真的用对了么?
元素居中有很多方法,在开发的时候用对一个正确的方法,不仅可以给我们的开发省时间省代码,还能达到不错的页面效果,下面就元素居中介绍如下:
一,元素的水平居中
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设置项目在交叉轴上垂直显示
以上是个人总结的几种方法,如果不全面,或有错误,请大牛指正