首页 > 其他分享 >利用定位+margin:auto实现元素水平居中

利用定位+margin:auto实现元素水平居中

时间:2023-03-17 11:33:29浏览次数:39  
标签:居中 定位 auto box1 margin box2

box1(父级)设置相对定位,box2(子级)绝对定位,并且四个属性值都为0,虽然box2设置了宽高,但实际上box2的虚拟占位已经撑满了个整个box1,这个时候给它一个margin:auto它就可以上下左右居中了。

结果图

 

标签:居中,定位,auto,box1,margin,box2
From: https://www.cnblogs.com/KoiPing/p/17226070.html

相关文章

  • 在ASP.NET WEBAPI中使用Autofac注入Hangfire
    一、配置环境   .NETFramework4.6.1  ASP.NETWEBAPI<packageid="Autofac"version="5.2.0"targetFramework="net461"/><packageid="Autofac.Mvc5"ver......
  • 垂直居中
    垂直居中-使用line-height我是垂直居中的。实例.center{line-height:200px;height:200px;border:3pxsolidgreen;text-align:center;}......
  • 垂直居中对齐
    垂直居中对齐-使用paddingCSS中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:我是垂直居中。实例.center{padding:70px0;......
  • Node.js cli tools auto install npm packages All In One
    Node.jsclitoolsautoinstallnpmpackagesAllInOnecliautoinstalldependencies/cli自动安装依赖原理分析读取本地或远程的templatefiles,复制模版文......
  • Automation 结合Logic Apps触发告警 - 配置
    创建好LogicApps之后,我们来看看如何实现automation以及logicapps的联动首先先配置logicapps,先设置好触发器,我们这里用HTTP的触发器然后设计好body的结构,主要就需要邮件的......
  • python绘图subplot绘制5幅图:以2行绘制,首行3幅图,次行2幅图居中(内含绘制3幅图简单版)
    省时版本解决方法请使用matplotlib.gridspecimportmatplotlibimportmatplotlib.pyplotaspltimportmatplotlib.gridspecasgridspecimportmatplotlib.grids......
  • css 各种居中
    1.内部容器居中flex<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文档标题</title></head><style>body{width:100vw;height:100vh;}.......
  • automapper 非依赖注入方式工具类
    publicclassMappingProfile{privatestaticMapperConfiguration_config=newMapperConfiguration(cfg=>{cfg.CreateMap<PredictionParams,Predict......
  • 图片居中对齐
    图片居中对齐要让图片居中对齐,可以使用 margin:auto; 并将它放到 块 元素中:实例img{display:block;margin:auto;width:40%;}https://www......
  • 文本居中对齐
    文本居中对齐如果仅仅是为了文本在元素内居中对齐,可以使用 text-align:center;文本居中对齐实例.center{text-align:center;border:3pxsolidgreen;}h......