zoukankan      html  css  js  c++  java
  • CSS 实现水平垂直居中

    使用绝对定位

    在已经知道子元素的宽高的时候,子元素设置成绝对定位,top,left,right,bottom=0, margin = auto

    .wrap{
      position: relative;
       500px;
      height: 200px;
      border: 2px solid #000;
    }
    .wrap > .inner{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
       100px;
      height: 100px;
      margin: auto;
      background: #000;
      color: #fff;
    }
    

    在线预览

    使用 transform

    设置 transform: translate(-50%, -50%)

    .wrap{
      position: relative;
       500px;
      height: 300px;
      border: 2px solid #000;
    }
    .wrap>.inner{
      position: absolute;
      top:50%;
      left: 50%;
      border: 1px solid red;
      transform: translate(-50%, -50%);
    }
    

    在线预览

    使用 flex

    给父元素设置display:flex;justify-content:center;align-items:center;

    .flex-container{
      display: flex;
      justify-content: center;
      align-items: center;
       400px;
      height: 400px;
      color: #fff;
      border: 5px solid green;
    }
    .flex-container > .flexitem{
       100px;
      height: 100px;
      background-color: blue;
      border: 1px solid yellow
    }
    

    在线预览

    附加 屏幕居中

    .center-center{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
       100px;
      height: 100px;
      margin: auto;
      border: 1px solid red;
      background: #000;
      color: #fff;
    }
    

    在线预览

  • 相关阅读:
    学习笔记4
    学习笔记2
    学习笔记1
    树莓派与Arduino串口通信
    团队大作业第三周周报
    团队大作业第二周周报
    团队大作业第一周周报
    RTCSD_第三次作业
    RTCSD_第二次作业
    RTCSD_第一次作业
  • 原文地址:https://www.cnblogs.com/wubh/p/css-layout-center.html
Copyright © 2011-2022 走看看