固定定位下的div水平居中
发现了一个之前未留意的知识点,做个笔记。
当一个块级元素的父元素开启了flex布局后,我们可以很轻松的将这个元素居中对齐,可以在父元素上加
justify-content: center;
align-items: center;/*单行下的居中对齐*/
或
justify-content: center;
align-content: center;
flex-wrap: wrap;/*多行下的居中对齐*/
然而,这种对齐方式是基于父元素开启了flex布局方式,假设该子元素开启了固定定位后,这种对齐方式便会失效,因为固定定位脱离了文档流,不受父元素的影响,父元素内对子元素的定位方式自然就不起作用了,那么问题来了:能否将这个固定定位的盒子居中显示呢?
方法是人想出来的。
在这里,我们可以结合css3和百分比定位达到目的:
.search_box {
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
max-width: 540px;
min-width: 320px;
/* 固定定位,脱离文档流 */
height: 44px;
/* 通过与left配合,使这个div居中显示 */
}
第一步:定位在50%,此时盒子会在居中靠右位置,但盒子的起点位于屏幕居中位置, top: 0; left: 50%; //以屏幕为基准,定位使盒子移动屏幕的一半
第二步:使用transform:translateX(-50%):将盒子水平向左位移到自身宽度的一半。//以自身为基准 ,通过transform使盒子移动自身宽度的一半
这样,就完成了水平居中显示.
固定定位下的div水平居中的更多相关文章
- 让IE6下支持固定定位
让IE下支持固定定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
- 解决ie6下不支持fix属性,模拟固定定位
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 实现 DIV 固定定位在网页主体部分最右侧
position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...
- 滚动条大于120px时,判断pc端的情况下,导航条固定定位
//滚动条大于120px时,判断pc端的情况下,导航条固定定位 $(window).scroll(function(){ var viewWidth=$(document).width() var ...
- 理解CSS相对定位和固定定位
× 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...
- Bootstrap 固定定位(Affix)
来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...
- div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...
随机推荐
- MYSQL 入门配置
1.下载 MYSQL官网 2.目录结构图基本如下 3.运行CMD(管理员权限),进入MYSQL目录下面的bin目录 4.执行 mysqld install 5.执行 net start mysql 6 ...
- WIN10家庭版桌面右键单击显示设置出现ms-settings:display或ms-settings:personalization-background解决办法[原创]
最近,笔者的笔记本卸载oracle数据库,注册表里面删除了不少相关信息,没想到担心的事情还是来了!桌面右键单击显示设置出现ms-settings:display或ms-settings:persona ...
- Element-UI 2.4.11 版本 使用注意(发现一点更新一点)
1.$Vue.$refs.addForm.resetFields() 的resetFields()方法重置到默认值并不是 ,你在form绑定对象上写的默认值 ,而是这个form被渲染出来之后第一次赋到 ...
- Go语言-基本的http请求操作
Go发起GET请求 基本的GET请求 //基本的GET请求 package main import ( "fmt" "io/ioutil" "net/ ...
- centos7 下面python2 共存python3
第一步.查看python的版本号以及安装路径: 通过以上的查看可以看到,python默认是指向到python2的,所以这里我们不动它,保持现状态即可. 备注:(因为现在还有很多的系统更新都需要使用到p ...
- 终于找到可以一文多发的平台了! openwrite.cn
openwrite.cn 一文多发平台 有时候自己辛苦写了几个小时的技术文章,被爬虫抓走.自己去全平台一个一个发,又过于麻烦.而且每个平台都不一样,发文同步很困难.那么终于有了一款一文多发的利器:Op ...
- HBase 系列(七)——HBase 过滤器详解
一.HBase过滤器简介 Hbase 提供了种类丰富的过滤器(filter)来提高数据处理的效率,用户可以通过内置或自定义的过滤器来对数据进行过滤,所有的过滤器都在服务端生效,即谓词下推(predic ...
- CentOS -- Redis 3.2.12 Standalone Install and Configuration
1 Tune OS setting echo never > /sys/kernel/mm/transparent_hugepage/enabled echo "vm.overcom ...
- Codeforces 936B
题意略. 思路: 图论里掺杂了一些动态规划. 有几个注意点: 1.dp时状态的设计:因为我们要寻求的是出度为0并且可以从起点走奇数步抵达的点,由于同一个点可以通过多种方式到达. 并且我们在获得奇数步点 ...
- (八)分布式通信----主机Host
上节中有谈到的是通信主机(TransportHost),本节中主机(ServiceHost)负责管理服务的生命周期. 项目中将两个主机拆分开,实现不同的功能: 通信主机:用于启动通信监听端口: 生命周 ...