css中两个不同的元素居页面中间

在CSS中，居中元素是一项常见的需求，但实现方法可能因所需的元素而有所不同。本文将探讨两种不同的元素在页面中间对齐的方法：文本和块级元素。

  /* 文本居中 */  .text-center {
        text-align: center;
  }
    

首先是文本居中，这里只需在文本的容器中使用text-align属性即可，将其设为center。例如：

  div class="text-center">
        p>
    我是居中的文本/p>
      /div>

这里使用一个div作为文本的容器，将其类名设为text-center，然后在p标签中输入需要居中的文本即可。

  /* 块级元素居中 */  .block-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
  }
    

接下来是块级元素居中，这里需要使用position属性和transform属性。具体方法是设置该元素的position属性为absolute，然后设置其top和left值均为50%。然后使用transform属性，将元素自身的宽高的一半（即translate的值）向左和向上移动，这样就可以实现垂直和水平居中。例如：

  div class="block-center">
        p>
    我是居中的块级元素/p>
      /div>
    

同样使用一个div作为块级元素的容器，将其类名设为block-center，然后在其中输入需要居中的块级元素即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！