zoukankan      html  css  js  c++  java
  • 水平垂直居中div(css3)

    一、在需要居中的元素加上如下C3属性即可:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .div{
                height: 330px;
                width: 330px;
                background-color: mediumspringgreen;
                border: 6px solid lightcoral;
                text-align: center;
                line-height: 330px;
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translateX(-50%) translateY(-50%);
                -moz-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
            }
        </style>
    </head>
    <body>
    
      <div class="div">上下左右居中</div>
    
    </body>
    </html>

    二、只要在父级元素上面加上这三句话就可以实现不定宽高水平垂直居中:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .father{
                width: 900px;
                height: 900px;
                background-color: aqua;
                display:flex;
                justify-content:center;/*水平居中*/
                align-items:center;/*垂直居中*/
    
            }
            .div{
                height: 330px;
                width: 330px;
                background-color: mediumspringgreen;
                border: 6px solid lightcoral;
                text-align: center;
                line-height: 330px;
                /*position: fixed;*/
                /*top: 50%;*/
                /*left: 50%;*/
                /*-webkit-transform: translateX(-50%) translateY(-50%);*/
                /*-moz-transform: translateX(-50%) translateY(-50%);*/
                /*-ms-transform: translateX(-50%) translateY(-50%);*/
                /*transform: translateX(-50%) translateY(-50%);*/
            }
        </style>
    </head>
    <body>
    
      <div class="father">
          <div class="div">上下左右居中</div>
      </div>
    
    
    </body>
    </html>        
     
  • 相关阅读:
    圆形刻度盘 进度 展示
    弧度、角度换算公式
    placeholder 颜色更改
    移除HTML5 input在type="number"时的上下小箭头
    linux 安装python-setuptools
    通过helm 安装 harbor 不成功问题处理
    k8s 添加ingress 暴露服务
    k8s编辑pod配置信息
    postgres 数据导入导出
    万能视频后台转码
  • 原文地址:https://www.cnblogs.com/wujiaqi/p/6070712.html
Copyright © 2011-2022 走看看