元素居中常用方法分享

1.行内文字居中：用于一段或一行文字的居中，在标题或者副标题的时候比较常用，在没设宽度且定位、浮动等情况下失效，如下：

　　text-align:center；

　　纵向居中的时候需要元素设高，使行高等于高即可，若是多行文字，可以使行高等于高/行数，假设高为99px，如下：

　　line-height:99px;

　　注意：行高要加单位，可以是px，em，rem等

2.表格内元素居中：用于表格的排版，由于现在使用tabal大多是用于画图表，很少用于排班，所以目前使用较少，具体如下：

　　横向：text-align:center;

　　纵向：vertical-align:middle;

　　横向纵向可以根据实际需要单独来写

3.元素水平居中：元素水平居中的时候，需要父元素和居中元素有宽才行，下面几种方法可以看个人喜好使用，具体如下：

　　使用外边距：margin:0 auto;

　　使用定位：positiong:absolute;

　　　　　　   left:50%;

　　　　　　　transform:translateX(-50%);/margin-left:50%;

　　注意：使用定位的话，父元素也要有定位属性，positiong:absolute;/positiong:relative;/positiong:fixed;都可以

　　使用外边距2：margin-left:50%;

　　　　　　　　  transform:translateX(-50%);

4.元素垂直居中：元素水平居中的时候，需要父元素和居中元素有高才行，下面几种方法可以看个人喜好使用，具体如下：

　　使用定位：positiong:absolute;

　　　　　　   top:50%;

　　　　　　　transform:translateY(-50%);/margin-top:50%;

　　注意：使用定位的话，父元素也要有定位属性，positiong:absolute;/positiong:relative;/positiong:fixed;都可以

　　使用外边距：margin-top:50%;

　　　　　　　　  transform:translateY(-50%);

5.元素居中：元素居中的时候，需要父元素和居中元素有宽和高才行，下面几种方法可以看个人喜好使用，具体如下：

　　使用定位+边距：positiong:absolute;

　　　　　　　　　  top:0;

　　　　　　　　　  bottom:0;

　　　　　　　　　  left:0;

　　　　　　　　　  right:0;

　　　　　　　　　  margin:auto;

　　注意：使用定位的话，父元素也要有定位属性，positiong:absolute;/positiong:relative;/positiong:fixed;都可以

　　使用定位：positiong:absolute;

　　　　　　   left:50%;

　　　　　　　top:50%;

　　　　　　　transform:translate(-50%,-50%);/margin-left:50%;margin-top:-50%;

　　使用外边距2：margin-left:50%;

　　　　　　　　  margin-top:50%;

　　　　　　　　  transform:translate(-50%,-50%);

 

 

以上就是目前比较常用的居中方式，欢迎各位大佬纠错或补充

转载于:https://www.cnblogs.com/passkey/p/9809557.html