zoukankan      html  css  js  c++  java
  • 水平居中 和 垂直居中 方法总结

    水平居中

      行内元素:

         * 如果父元素是块级元素,则直接给父元素设置text-align:center;

         * 如果父元素是不是块级元素,先将父元素设置为块级元素,再给父元素设置text-align:center;

      块级元素:

        * 需要谁居中,给其设置 margin: 0 auto

        * 父元素设置相对定位,子元素设为: position:absolute;left: 50%;margin-left:-元素宽度的一半

        *父元素设置相对定位,子元素设为: position:absolute;left: 50%;transform:translateX(-50%)

        * 使用flexbox布局,父元素设置: dispaly: flex;justify-content: center;

    垂直居中

      行元素:

         单行的行内元素:设置行高等于高度即可 ling-height= height

        *  多行的行内元素: 给父元素设置 display: table-cell;vertical-align: middle

      块级元素:

        *父元素设置相对定位,子元素设置:position:sabsolute;top: 50%;margin-top:-元素高度的一半

         * 父元素设置相对定位,子元素设置: position:absolute;top: 50%; transform:translateY(-50%);

        * 使用flexbox布局,父元素设置:display: flex;align-items: center;

    水平垂直居中

      已知宽高:

        * 设置父元素为相对定位,子元素设置:position:absolute;top:0;left:0;right:0;bottom:0; 200px;height:200px;margin:auto;

        * 设置父元素为相对定位,子元素设置:position:absolute;left: 50%;top:50%;200px;height:200px;margin-top:-100px;margin-left: -100px;

      未知宽高:

        *设置父元素为相对定位,子元素设置:position:absolute;top: 50%;left:50%;transform:translate(-50%,-50%);

        * 使用flexbox布局:父元素设置:display:flex;align-items:center;justify-content:center;

  • 相关阅读:
    WCF-配置
    乡下人生活录——程序员给自己买份保险吧
    Sqlserver表分区
    Oracle通过Navicat导入表数据与机构,数据无法直接查询,需要加双引号的问题
    19.Imagetragick 命令执行漏洞(CVE-2016–3714)
    18.phpmyadmin 4.8.1 远程文件包含漏洞(CVE-2018-12613)
    17.[CVE-2017-12615]Tomcat任意文件上传漏洞
    16.Tomcat弱口令 && 后台getshell漏洞
    15.Nginx 解析漏洞复现
    14.Nginx 文件名逻辑漏洞(CVE-2013-4547)
  • 原文地址:https://www.cnblogs.com/yangkangkang/p/11347052.html
Copyright © 2011-2022 走看看