html5垂直水平居中

来源：互联网发布：linux拷贝文件夹的命令编辑：程序博客网时间：2024/06/06 07:28

<!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>

阅读全文

1 0