zoukankan      html  css  js  c++  java
  • CSS知识点

    实现div盒子水平垂直居中的几种方式

      <body id="container">
          <div id="middle"></div>
      </body>

      <style>

        html,body {
          height:100%; /*  注意html不设置高度 body也就没有继承高度,就会随内容支撑高度

          overflow: hidden; */ //方式一

          margin:0;

          padding: 0;

        }

      </style>

      1.第一种方式元素已知宽度高度,绝对定位absolute+margin一半

      #middle {
        background: red;

         200px;

        height: 200px;

        position: absolute;

        top: 50%;

        left: 50%;

        margin-left: -100px;

        margin-top: -100px;

      }

      2. 第二种方式元素未知,绝对定位absolute+translate(平移一半)

      #middle {
        background: red;

         200px;

        height: 200px;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%,-50%);

      }

      3. 第三种方式元素未知,绝对定位absolute+margin:auto

      #middle {
        background: red;

         200px;

        height: 200px;

        position: absolute;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

        margin: auto;

      }

      4. 第二种方式元素未知,display:flex

      #container{

        display: flex;

        justify-content: center;

        align-items: center;

      }

  • 相关阅读:
    test
    flash链接需要后台调用时的插入flash方法
    js验证码倒计时
    设置Cookie
    用in判断input中的placeholder属性是否在这个对象里
    常用的正则表达式规则
    webApp添加到iOS桌面
    .substr()在字符串每个字母前面加上一个1
    PAT 甲级1001 A+B Format (20)(C++ -思路)
    PAT 1012 数字分类 (20)(代码+测试点)
  • 原文地址:https://www.cnblogs.com/vofill/p/14801986.html
Copyright © 2011-2022 走看看