1. 文字水平居中
文字水平居中是指将一行或多行文字在其所在的盒子中水平居中,实现方法如下:
将文本所在的盒子设置为居中对齐即可,常用于h1、h2、p等标签。
2. 图片水平居中
图片水平居中是指将图片在其所在的盒子中水平居中,实现方法如下:
argin: 0 auto;
将图片所在的盒子设置为左右边距均为auto,即可实现水平居中。
3. 盒子水平居中
盒子水平居中是指将盒子在其父元素中水平居中,实现方法如下:
argin: 0 auto;
width: 50%;
将盒子的左右边距均为auto,并将盒子的宽度设置为父元素的50%,即可实现盒子水平居中。
4. 盒子垂直居中
盒子垂直居中是指将盒子在其父元素中垂直居中,实现方法如下:
: absolute;
top: 50%;
left: 50%;sformslate(-50%, -50%);
sform属性将盒子的位置向左上方移动自身宽度和高度的一半,即可实现盒子垂直居中。
5. 文字垂直居中
文字垂直居中是指将一行或多行文字在其所在的盒子中垂直居中,实现方法如下:
display: flex;tentter;ster;
将文本所在的盒子设置为弹性盒子,将盒子的主轴和交叉轴均设置为居中对齐,即可实现文字垂直居中。
6. 图片垂直居中
图片垂直居中是指将图片在其所在的盒子中垂直居中,实现方法如下:
: absolute;
top: 50%;sformslateY(-50%);
sform属性将图片的位置向上移动自身高度的一半,即可实现图片垂直居中。
以上就是HTML5中实现元素居中的几种方法,大家可以根据实际需求选择合适的方法进行应用。