zoukankan      html  css  js  c++  java
  • web前端_老掉牙垂直水平居中

    如题,垂直水平居中确实是前端老掉牙的问题了。。所以,直接po下几种实现,以此为记录~

    以下全部实现都是基于css!!!!!!!js的以后另谈啦~

    简单布局<div class='one'><div class='two'></div></div>

    1. position+calc

    比如,将two的style设置为position:relative;宽高设置为calc(50%-固定宽高1/2)。

    这种方法主要缺点就是。。居中的元素只能是固定宽高。。伤不起啊。

    2. 空元素..

    这个就不怎么介绍了,原理就是用空元素占领前面的位置,之后需要居中的元素排在后面居中即可,一般不会用这样的实现方式的,所以省略~

    3. 父元素padding

    父元素padding实现居中也是通过calc作为辅助,设置父元素的padding为calc(50%-父子元素宽高差1/2),同样是只能用于固定宽高。

    需要注意一点是,box-sizing需要设置为border-box,不然padding会挤出你期望的宽高。

    4. 子元素margin

    子元素margin实现。需要注意一点是,子元素需要设置为inline-block,之后通过margin设置居中即可。

    5. flex布局

    flex实现只要3行属性即可实现居中,将one的style设置为display:flex;justify-content:center;align-items:center;就完成了。能够将宽高未知的元素也设置为居中了。

    6. transform

    transform实现居中同理也是适用于宽高未知的元素居中。主要css代码是.one{position:非static}.two{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);},大功告成。

  • 相关阅读:
    Entity Framework 6 (7) vs NHibernate 4: DDD perspective(纯净DDD很难很难...)
    asp.net解决高并发的方案
    我所经历的SAP选型[转]
    为什么我不再用 .NET 框架
    Why I Left the .NET Framework
    Docker 传奇之 dotCloud
    ICE概述
    .NET Out Of Memory Exception
    iOS-申请邓白氏编码的超详细流程介绍
    .NET对象与Windows句柄(三):句柄泄露实例分析
  • 原文地址:https://www.cnblogs.com/easyToCode/p/5196924.html
Copyright © 2011-2022 走看看