发布时间:2023-05-31 文章分类:WEB开发, 电脑百科 投稿人:李佳 字号: 默认 | | 超大 打印

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

<body>
  <div class="box">
    <p>文本水平,垂直居中</p>
  </div>
</body>

html 怎么设置文本对齐,文本间距,盒子居中显示

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

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

html 怎么设置文本对齐,文本间距,盒子居中显示

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

<body>
  <div class="box">
    <div>元素居中</div>
  </div>
</body>

html 怎么设置文本对齐,文本间距,盒子居中显示

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

可以为元素添加定位(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%;

html 怎么设置文本对齐,文本间距,盒子居中显示

为什么这里元素并没有在正中间呢? 这是因为里面的盒子只是向右,向下移动了父盒子的宽高的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%);

html 怎么设置文本对齐,文本间距,盒子居中显示