关于元素居中之我见(干货)

paradise-zzz paradise-zzz     2022-10-16     756

关键词:

  1. 不使用定位

    水平居中:text-align = center;(可继承)

    竖直居中:margin:0 auto;(块级元素)

    其他居中:1.文字居中:父元素设置高 子元素设置高  line-height=height(父元素)

            2.图片居中:  vertical-aign:middle ;  <-- 必须放在图片元素中

1   .first{
2     width: 300px;
3     height: 100px;
4     background-color: black;
5     color: white;
6     text-align: center;
7     margin: 0 auto; //针对块级元素
8 
9   }
1   <div class="first">
2     不使用定位(1)
3   </div>
  .second{
    width: 300px;
    height: 100px;
    background-color: green;
  }
  .s_child{
    width: 150px;
    line-height: 100px;
  }
  <div class="second">
    <div class="s_child">
      不使用定位(2)
    </div>
  </div>

  2.定位居中

   a.父元素高度固定     

    父元素:相对定位

    子元素:绝对定位

        top:50%(父元素高度的一半)

        left:50%

        margin-top:自己的高度一半;(加负号)

        margin-left:自己宽度的一半;(加负号)

.dw_one{
      width: 600px;
      height: 300px;
      position: absolute;
      background: black;

    }
    .dw_one_child{
      background: white;
      position: relative;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px;
    }
  <div class="dw_one">
    <div class="dw_one_child">
      a
    </div>
  </div>

    b.父元素高度不固定

  .wrapper{
      width: 600px;
      height: 600px;
    }
    .dw_two{
      width: 100%;
      height: 100%;
      position: absolute;
      background: black;

    }
    .dw_two_child{
      background: white;
      position: relative;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      transform:translate(-50%, -50%);
      -moz-transform:translate(-50%, -50%);
      -ms-transform:translate(-50%, -50%);
      -o-transform:translate(-50%, -50%);
      -webkit-transform:translate(-50%, -50%);
    }
1 <div class="wrapper">
2   <div class="dw_two">
3       <div class="dw_two_child">
4         a
5       </div>
6   </div>
7 </div>

 

join()方法之我见

...avaScriptjoin()方法定义和用法join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。语法arrayObject.join(separator)参数描述separator可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔... 查看详情

关于单点登录第一天接触之我见

前几天老大要搭好了项目框架,然后没要我继续跟进,而是做单点登录。我操,跨系统。有点紧张,礼拜天看了看单点登录。理论梳理:单点登录(SingleSignOn),简称为SSO,是目前比较流行的企业业务整合的解决方案之一。SSO的... 查看详情

关于王小云破解md5之我见

CSDN一篇报道说中国数学家王小云等在Crypto2004上提出一种能成功攻破MD5的算法,GIGIX和王兄都在BLOG里引用了相关的报道。MD5是一种摘要算法,所以理论上是不可能从签名取得原文(见下面说明)。认为要从MD5的结果中取得原文才... 查看详情

启承转合——沟通管理之我见

...程,以求思想达成一致和感情的通畅。近年来,在中国,关于沟通的讨论,理论很多。每一个管理类的培训,开篇基本上是关于沟通管 查看详情

过拟合之我见

    查看详情

async和await之我见(代码片段)

...积压着的许多问题,所以写一篇博客来和大家分享一下。关于异步机制我认为只要记住的以下几点,就可以弄明白了:1.我认为async和awwait两个修饰符中最关键的是await,async是由于方法中包含await修饰符之后才在方法定义中添加... 查看详情

谷歌全景拼接出错之我见

最近,一篇关于使用谷歌AI全景拼接技术对照片进行拼接出错的新闻引爆了社交网络。这和我前段时间所研究的Opencv全景拼接技术有关,因此这篇新闻也引起了我的兴趣。事件的起因是AlexHarker和他的朋友在加拿大路易斯... 查看详情

架构师之我见

...朋友也可以留言,我们共同探讨这个话题。 架构师之我见                                                                                  2009-08-06架构 查看详情

闭包之我见

一、闭包是什么?  · 闭包就是可以使得函数外部的对象能够获取函数内部的信息。  ·闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。... 查看详情

前端之我见(代码片段)

1.HTML介绍1.1服务器本质1importsocket234sk=socket.socket()56sk.bind(("127.0.0.1",8080))7sk.listen(5)8910whileTrue:11conn,addr=sk.accept()12data=conn.recv(8096)13conn.send(b"HTTP/1.1200OK\\r\\n\\r\\n")14conn.s 查看详情

httphelper之我见

    前几月一直用一个Http的访问类去调用WebApi,说句实话最开始没觉有什么,一是技术老,二是觉得比较简单,但是最近我一直关注云开发和AI这块儿微软技术,看到云平台调用API大多类似,所以回想这个早年的调... 查看详情

我之我见:ftp共享

目录1.ftp服务概述...11.1简介...11.2复合TCP连接...11.3数据连接模式...11.3.1主动模式...11.3.2被动模式...11.4数据传输模式...11.5ftp类型...12.部署ftp.22.1安装ftp.22.2ftp功能划分...22.2.1ftp访问控制...22.2.2ftp连接及传输控制...22.2.3ftp上传文件默... 查看详情

fec之我见一

顾名思义,FEC前向纠错,根据收到的包进行计算获取丢掉的包,而和大神沟通的结果就是纠错神髓:收到的媒体包+冗余包>=原始媒体包数据   直到满足 收到的媒体包+ 冗余包>=原始媒体包数据   ... 查看详情

classpathxmlapplicationcontext源代码阅读之我见

由于本人的能力有限,只能说出自己的见解,如有错漏什么的,请大家批评指出。由于代码封装太多,这里只列出了我认为的部分最重要的代码,一些简单的封装代码,不在下面列出。由于代码太过于复杂,在本次博客中,只列... 查看详情

jquery中的callbacks之我见

callbacks是jquery的核心之一。语法如下:jQuery.Callbacks(flags)  flags 类型: String 一个用空格标记分隔的标志可选列表,用来改变回调列表中的行为。once:确保这个回调列表只执行(.fire())一次(像一个递延Deferred).memory:... 查看详情

编译原理之我见

     经过网上的调查,我发现编译原理并不像我所想象的那样简单,我以为编译原理其实就是像塑造一个翻译师一样,赋予它翻译的架构即可,但是经过调查后,结果却不是我所想,编译原理就是将高级语言翻... 查看详情

我之我见:samba共享

目录1.Samba概述11.1Samba简介11.2SMB/CIFS协议11.3Samba服务基础11.3.1主要软件包11.3.2系统服务脚本11.4共享账号控制11.4.1共享访问控制11.4.2共享账号管理22.配置Samba服务器22.1服务器端操作32.1.1安装samba服务器端程序32.1.2建立samba认证用户nic... 查看详情

fec之我见三

继续上文讲解:3)标准的RTP头结构如下所示:其中第一个字节中的x标志位是否扩展了RTP头,RTP协议允许用户自定义的扩展,扩展的字段紧挨上述RTP固定头。RTP扩展投中承载如下信息:1).当前包所在的Group组序号,码流由连续的Gr... 查看详情