absolute之实现居中的三种方式

居中思想可以由很多方式实现,这篇文章采用absolute实现:由传统方式开始到absolute独立使用方式

方式一:传统方式,父容器relateive,子元素absolute,然后left:50%,再margin-left:-width/2

<div class="ago">
   <div class="mid"></div>
</div>

.ago{
    width:400px;
    height:200px;
    background:#ccc;
    position:relative;
}
.mid{
    width:50px;
    height:50px;
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    margin:-25px 0 0 -25px;
}

方式二:独立使用 absolute 一

<div class="nb">
     &nbsp;<div class="middle"></div>
</div>

.nb{
     width:400px;
     height:200px;
     background:#ccc;
     text-align:center;
     overflow:hidden;
}
.middle{
    display:inlineblock;
    *display:inline;*zoom:1;
    width:50px;height:50px;
    background:green;
    position:absolute;
    margin-left:-38px;
    margin-top:75px;
}
/*思想:将内部元素转化成行内元素,再在要居中的元素前加个空格,相当一个行内元素,
  然后将父元素text-align:center;把行内元素居中显示了
  然后将要居中的元素absolute,由于独立使用absolute的跟性特性,它会脱离文档流,并紧跟在空格的后面
  最后通过调整margin-left的值进行居中
 */

方式三:独立使用 absolute 二,也是我比较推崇方式,尤其是在移动端,各种方便,管它是高矮胖搜呢,就是通吃,自从学会这种方式,妈妈再也不用担心我的居中了。

<div class="db">
    <div class="dm"></div>
</div>

.db{
    width:400px;
    height:200px;
    background:#ccc;
}
.dm{
    width:50px;
    height:50px;
    background:pink;
    position:absolute;
    left:0;right:0;
    top:0;bottom:0;
    margin:auto;
} 

/*是不是很酷,我已完全不能自拔了*/
时间: 2024-10-10 06:56:42

absolute之实现居中的三种方式的相关文章

C语言实现比特位数组在目标空间左右居中对齐三种方式

在LED行业中,一般一个灯亮或者不亮用一个bit位来表示(这里就不谈七彩或者灰度控制卡),假如我们屏幕大小是128点,相当于宽度16个字节,如果我们让两个汉字居中显示(两个汉字占宽度4个字节),很容易算出,只要偏移(16 - 4) / 2 = 6个字节宽度,当然这是假象的某种状况,如果显示的字符长度.宽度任意变化,手动计算好像有点无力.本文主要是来解决这个问题,实现的效果有,字符宽度随意设置,字符个数小于256,而且还可以设置靠左.靠右和居中显示,代码读起来可能不是那么顺畅,写起来也不顺畅,经反

设置元素竖向居中的三种方式

/*No.1*/ li{ line-height: ;//设为页面高度 vertical-align: middle; } li,img{ vertical-align: middle; } /*No.2*/ li{ display: table-cell; vertical-align: middle; } /*No.3*/ li{ display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }

iOS开发 跳转场景的三种方式

假设A跳转到B,三种方法: 1.按住ctrl键,拖动A上的控件(比如说UIButton)到B上,弹出菜单,选择Modal.不需要写任何代码,在A上点击Button就会跳转到B 2. 按住ctrl键,拖动A上的View Controller到B上,弹出菜单,选择Modal,两个场景间自动添加连接线和图标,选中该图标,打开Storyboard Segue,identifier输入一个标识符,这里以”aaaa”为例.A里需要跳转时,执行下面的代码: 1 [self performSegueWithId

用三种方式实现导航菜单中的二级下拉菜单

如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

HTML5实现动画三种方式

编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制的帧间隔,以及可能你电脑处理器的原因,播放过程可能有些不太流畅或者失真! 分三种方式实现: (1)   canvas元素结合JS (2)   纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE) (3)   CSS3结合Jquery实现 知道如何使用CSS3动画比知道如何使用<canvas>元

1.关于css居中的几种方式

刚开始的时候看到垂直居中就有点头大,现在写出来为后来的同学头不要再大 首先来看一下dom结构,一般是俩个容器, <div class="container"> <div class="t1"> </div> </div> 第一种方式 也是很常用的一种方式 贴css代码 .container{ width: 400px; height: 400px; margin: 0 auto; background: lightco

css 圣杯布局三种方式

所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应.我们可以用浮动.定位以及flex这三种方式来实现 一般这种布局方式适用于各种移动端顶部搜索部分,这是最常见的,如京东手机版主页面顶部搜索: 可以看到左边有个菜单按钮,中间是搜索框,右边是登录两个文字,左右大小是固定的,而中间部分则是随着手机屏幕尺寸的大小而自适应.   第一种方法 float实现: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 &

AngularJs学习——实现数据绑定的三种方式

三种方式: 方式一:<h5>{{msg}}</h5>  此方式在页面刷新的时候会闪现{{}} 方式二:<h5 ng-bind="msg"></h5> 方式三:<h5 ng-clock class="ng-clock">{{msg}}</h5> 示例代码: <!DOCTYPE html> <html lang="en" ng-app="myapp&q

小蚂蚁学习页面静态化(2)——更新生成纯静态化页面的三种方式

更新生成纯静态化页面的三种方式:1.按照时间间隔更新.2.手动更新.3.定时更新(需要系统配合). 1. 按照时间间隔更新. 当用户第一次访问这个页面的时候,程序自动判断,该静态文件是否存在,并且该文件是否还在有效时间内,如果该文件未超出了有效时间,用户访问的是已经生成的静态文件.如果超出了有效时间,用户得到的是动态输出的内容,同时重新生成静态文件.稍微修改一下昨天的代码为例: <?php //首先判断是否有静态文件,并且文件的最新修改时间到现在是否大于20秒 if(is_file('./tex