html怎么对齐文本框（html 怎么设置文本对齐，文本间距，盒子居中显示）

时间2025-04-29 20:04:53分类IT科技浏览3746

导读：1.在一个盒子中我们怎么让文本水平，垂直居中显示 <...

1.在一个盒子中我们怎么让文本水平，垂直居中显示

可以看到此时文本默认是在盒子的左上角显示的，可以添加行高（line-height 值与盒子高度一样就行），和文本对齐方式设置为水平居中 ，代码如下：

.box>p { width: 100%; height: 50px; /* 这里为了方便显示效果，加了边框 */ border: solid 2px pink; /* 段落标签中文本居中 */ /* 设置行高(与盒子高度一样就行) */ line-height: 50px; text-align: center; }

2.怎么让盒子中的元素居中显示

这里我们可以看到，盒子中的元素也是默认左上角对齐的

可以为元素添加定位（position:absolute;）这里记得给父盒子加上先对定位（position：relative），然后调整边偏距 left：50% ，top：50%；

这里的意思是元素距离盒子的左，上各50%（这个50%是相对于父盒子的宽高）

.box>div { width: 50px; height: 50px; /* 这里为了方便显示效果，加了边框 */ border: 2px solid blue; /* 添加定位（子绝父相） */ position: absolute; /* 相对于父盒子定位 */ left: 50%; top: 50%;

为什么这里元素并没有在正中间呢？这是因为里面的盒子只是向右，向下移动了父盒子的宽高的50% ，还有盒子自身的高度并没有计算

这里有两种方法可以调整：

1. 调整盒子外边距（margin）

margin-left：-25px;margin-top: -25px; 25px是元素盒子的宽高的一半，这里不可以写50%哟。

/* 1.添加外边距 */ margin-top: -25px; margin-left: -25px;

2. 利用css2D属性transform来调整

transform: translate(-50%,-50%); 这里是相对于元素盒子的50% 。

/* 2.利用2D移动（transform:translate()） */ transform: translate(-50%, -50%);