html5垂直水平居中

最新推荐文章于 2021-08-16 18:24:10 发布

小菜鸟1+1

最新推荐文章于 2021-08-16 18:24:10 发布

阅读量925

点赞数 1

分类专栏： html+css+js 文章标签： html5

本文链接：https://blog.csdn.net/once_Project/article/details/72284864

版权

html+css+js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <title>居中效果</title>
       <style>
           div {
               position: relative;
               width: 240px;
               height: 120px;
           }

           .content-center {
               display: flex;
               align-items: center;
               /*stretch:默认值项目被拉伸以适应容器 center:项目位于容器的中心。 flex-start:项目位于容器的开头 flex-end:项目位于容器的结尾。baseline:项目位于容器的基线上*/
               justify-content: center;
               /*flex-start:默认值 flex-end:项目位于容器的结尾。 center:项目位于容器的中心。 space-between:项目位于各行之间留有空白的容器内。 space-around:项目位于各行之前、之间、之后都留有空白的容器内。*/
           }

           .content {
               position: relative;
               width: 80px;
               height: 80px;
           }
       </style>
   </head>

   <body>
       <div class="content-center" style="background-color: yellow;">
           <div class="content content-center" style="background-color: red;">标签块居中</div>
       </div>
   </body>

</html>