• css居中问题


    1、水平居中

    1.1、行内元素直接水平居中(text-align)

    text-align:center;

    只要父元素设置该属性值,所有的行内子元素都会水平居中。且该属性有继承性

    2、确定宽度的块级元素实现水平居中

    2.1、自动边距实现水平居中(margin)

    margin: 0 auto;

    具有宽度的块级元素设置上面属性后就会在父元素中左右居中

    2.2、绝对定位和负边距实现水平居中(absolute+margin)

    .parent {
      position: relative;
    }
    .children {
      width: 150px;
      height: 150px;
      background: #d780c9;
      position: absolute;
      left: 50%;
      margin-left: -75px;
    }

    将父元素定位为 relative,子元素定位为 absolute,子元素就会相对于父元素进行定位,left 设为50%,margin-left 为宽度的一半,由此实现了左右居中。

    2.3、绝对定位和0实现居中(absolute+left+right+top+bottom)

    该方法可实现垂直水平居中

    .parent {
      display: relative;
    }
    .children {
      width: 150px;
      height: 150px;
      background: #d780c9;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    将子元素设为 position: absolute + (left=0+top=0+right=0+bottom=0)+ margin: auto,将父元素定位为 relative,由此子元素将会在父元素中垂直水平居中。如果父元素没有相对定位,则该元素相对于整个窗口垂直水平居中。

    3、不确定宽度的元素实现水平居中

    3.1、绝对定位和transform实现水平居中(absolute+transform)

    .children {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    3.2、flex 布局实现水平居中

    .parent{
      display: flex;
      justify-content: center;
    }

    3.3、table 加自动 margin 实现左右居中(table+margin)

    .children {
      display: table;
      margin: 0 auto;
    }

    在某一元素中设置display为table,左右外边距自动,由此可实现在父元素中左右居中。

    3.4、设为行内元素实现水平居中(inline-block+text-align)

    .parent {
      text-align: center;
    }
    .children {
      display: inline-block;
      /*或者: display: inline; */
    }

    子元素设为行内元素,父元素通过属性 text-align 设置行内元素居中。

    4、垂直居中

    4.1、flex实现垂直居中

    .parent{
      display: flex;
      align-items: center;
    }

    4.2、绝对定位和负边距(absolute+margin)

    .parent {
      position: relative;
    }
    .children {
      width: 150px;
      height: 150px;
      position: absolute;
      top: 50%;
      margin-top: -75px;
    }

    4.3、table-cell实现垂直居中(table-cell+vertical-align)

    .parent{
      display: table-cell;
      vertical-align: middle;
    }

    由此父元素中的子元素全部都实现了垂直居中

    4.4、绝对定位和0

    参考上面的2.3

    4.5、绝对定位和transform

    参考上面的3.1

    详细参考:https://blog.csdn.net/dengdongxia/article/details/80297116

  • 相关阅读:
    Win10系统怎么彻底关闭Windows defender?
    用 winrar 解压 haozip 分卷压缩包的方法
    关闭WordPress自动保存和文章修订功能
    WordPress中Invalid argument supplied for foreach()错误原因及解决办法
    C#PDF转图片
    VS使用Nuget教程详解 Visual Studio 安装第三方的组件库
    kafka源码阅读环境搭建
    博客园主题美化
    官方文档
    [UGUI]UI特效裁剪
  • 原文地址:https://www.cnblogs.com/wenxuehai/p/10513357.html
Copyright © 2020-2023  润新知