发现了一个之前未留意的知识点,做个笔记。

当一个块级元素的父元素开启了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水平居中的更多相关文章

  1. 让IE6下支持固定定位

    让IE下支持固定定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  2. 解决IE6下浮动层固定定位的经典方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

  4. 解决ie6下不支持fix属性,模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 实现 DIV 固定定位在网页主体部分最右侧

    position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...

  6. 滚动条大于120px时,判断pc端的情况下,导航条固定定位

      //滚动条大于120px时,判断pc端的情况下,导航条固定定位 $(window).scroll(function(){ var viewWidth=$(document).width() var ...

  7. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  8. Bootstrap 固定定位(Affix)

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

  9. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

随机推荐

  1. MYSQL 入门配置

    1.下载 MYSQL官网 2.目录结构图基本如下 3.运行CMD(管理员权限),进入MYSQL目录下面的bin目录 4.执行 mysqld install 5.执行 net start mysql 6 ...

  2. WIN10家庭版桌面右键单击显示设置出现ms-settings:display或ms-settings:personalization-background解决办法[原创]

    最近,笔者的笔记本卸载oracle数据库,注册表里面删除了不少相关信息,没想到担心的事情还是来了!桌面右键单击显示设置出现ms-settings:display或ms-settings:persona ...

  3. Element-UI 2.4.11 版本 使用注意(发现一点更新一点)

    1.$Vue.$refs.addForm.resetFields() 的resetFields()方法重置到默认值并不是 ,你在form绑定对象上写的默认值 ,而是这个form被渲染出来之后第一次赋到 ...

  4. Go语言-基本的http请求操作

    Go发起GET请求 基本的GET请求 //基本的GET请求 package main import ( "fmt" "io/ioutil" "net/ ...

  5. centos7 下面python2 共存python3

    第一步.查看python的版本号以及安装路径: 通过以上的查看可以看到,python默认是指向到python2的,所以这里我们不动它,保持现状态即可. 备注:(因为现在还有很多的系统更新都需要使用到p ...

  6. 终于找到可以一文多发的平台了! openwrite.cn

    openwrite.cn 一文多发平台 有时候自己辛苦写了几个小时的技术文章,被爬虫抓走.自己去全平台一个一个发,又过于麻烦.而且每个平台都不一样,发文同步很困难.那么终于有了一款一文多发的利器:Op ...

  7. HBase 系列(七)——HBase 过滤器详解

    一.HBase过滤器简介 Hbase 提供了种类丰富的过滤器(filter)来提高数据处理的效率,用户可以通过内置或自定义的过滤器来对数据进行过滤,所有的过滤器都在服务端生效,即谓词下推(predic ...

  8. CentOS -- Redis 3.2.12 Standalone Install and Configuration

    1 Tune OS setting  echo never > /sys/kernel/mm/transparent_hugepage/enabled echo "vm.overcom ...

  9. Codeforces 936B

    题意略. 思路: 图论里掺杂了一些动态规划. 有几个注意点: 1.dp时状态的设计:因为我们要寻求的是出度为0并且可以从起点走奇数步抵达的点,由于同一个点可以通过多种方式到达. 并且我们在获得奇数步点 ...

  10. (八)分布式通信----主机Host

    上节中有谈到的是通信主机(TransportHost),本节中主机(ServiceHost)负责管理服务的生命周期. 项目中将两个主机拆分开,实现不同的功能: 通信主机:用于启动通信监听端口: 生命周 ...