zoukankan      html  css  js  c++  java
  • 如何居中div?

    1、水平居中:给div设置一个宽度,然后添加margin:0 auto属性
    div{
      200px;
      margin:0 auto;
    }
    
    2、水平垂直居中一
    确定容器的宽高 宽500 高 300 的层
    设置层的外边距
    div {
      position: relative;     /* 相对定位或绝对定位均可 */
      500px; 
      height:300px;
      top: 50%;
      left: 50%;
      margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
      background-color: pink;     /* 方便看效果 */
    }
    
    3、水平垂直居中二
    未知容器的宽高,利用 `transform` 属性
    div {
      position: absolute;     /* 相对定位或绝对定位均可 */
      500px; 
      height:300px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: pink;     /* 方便看效果 */
    }
    
    4、水平垂直居中三
    利用 flex 布局
    实际使用时应考虑兼容性
    .container {
      display: flex; 
      align-items: center;        /* 垂直居中 */
      justify-content: center;    /* 水平居中 */
    }
    .container div {
       100px;
      height: 100px;
      background-color: pink;     /* 方便看效果 */
    }
    

    .

  • 相关阅读:
    Redis笔记
    java多线程 interrupt(), interrupted(), isInterrupted()方法区别
    策略模式
    外观模式
    Java线程池原理与架构分析
    状态模式
    模板方法模式
    LeetCode | Path-Sum
    实用工具
    IDEA springboot配置
  • 原文地址:https://www.cnblogs.com/crazycode2/p/11610595.html
Copyright © 2011-2022 走看看