HTML行内元素水平居中的方法

本篇内容介绍了“HTML行内元素水平居中的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;

如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

块级元素水平居中(定宽度)：

1）需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）

2) 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

块级元素水平居中(不宽度)：

1) 默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

2) 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

利用css3新增属性transform: translateX(-50%);

使用flexbox布局实现水平居中（宽度定不定都可以）:

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

单行的行内元素垂直居中:

只需要设置单行行内元素的"行高等于盒子的高"即可；

多行的行内元素垂直居中:

使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

块级元素垂直居中方法一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

不定高度：利用css3新增属性transform: translateY(-50%);

块级元素垂直居中方法二：使用flexbox布局实现（高度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

水平垂直居中-已知高度和宽度的元素：

方法一：

设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方法二：

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

“HTML行内元素水平居中的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！