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;

      }

  • 相关阅读:
    Python包中__init__.py作用
    获取web页面xpath
    Selenium学习(Python)
    C++构造函数的选择
    分布式实时处理系统——C++高性能编程
    构建之法(邹欣)
    分布式实时处理系统——通信基础
    go语言-csp模型-并发通道
    redis.conf 配置说明
    Linux fork()一个进程内核态的变化
  • 原文地址:https://www.cnblogs.com/vofill/p/14801986.html
Copyright © 2011-2022 走看看