+ -
当前位置:首页 →  php教程>CSS元素垂直居中

CSS元素垂直居中

时间:2021-04-21

来源:互联网

在手机上看
手机扫描阅读

今天PHP爱好者为您带来CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式,但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。希望对大家有所帮助。

2021040615512486958.jpg

CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式,但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。

1.容器里面的内容只有一行文字

<!DOCTYPE html>
<html>
 <style>
   * {
     padding: 0;
     margin: 0;
   }
   div {
     height: 60px;
     background-color: #1888fa;
     color: white;
   }
   span {
     line-height: 60px;/* 设置一个大的行高,让它等于理想的容器高度。
     这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素,可以设置为inline-block。 */
   }
 </style>
 <body>
   <div>
     <span>测试</span>
   </div>
 </body>
</html>

2.容器自然高度

CSS中最简单的垂直居中方法是给容器相等的上下内边距,让容器和内容自行决定自己的高度。看下面的例子, 通过设置padding-toppadding-bottom相等的值,让内容在父容器垂直居中。

<!DOCTYPE html>
<html>
  <style>
     * {
       padding: 0;
       margin: 0;
     }
     div {
       padding-top: 20px;  
       padding-bottom: 20px;
       background-color: #1888FA;
       color: white;
     }
   </style>
   <body>
     <div>
        <span>测试</span>
     </div>
   </body>
</html>

3.使用 FlexBox

<!DOCTYPE html>
<html>
 <style>
   * {
     padding: 0;
     margin: 0;
   }
   div {
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #1888fa;
     color: white;
   }
 </style>
 <body>
   <div>
     <span>测试</span>
   </div>
 </body>
</html>

以上就是CSS元素垂直居中的详细内容,更多请关注php爱好者其它相关文章!

热门下载

更多