html结构

   <body>

        <div class="father">

              <div class="son"></div>

        </div>

   </body>

CSS结构

      <style>

        .father{

            position: relative;

            width: 400px;

            height: 300px;

            background-color: pink;

        }

        .son{

            position: absolute;

            top:0;

            left: 50%; /*相对父元素的50% ，margin-left同理*/

            transform: translateX(-50%); /*相对自己宽度回走50%*/

            width: 100px;

            height: 50px;

            background-color: blue;

        }

    </style>

这样无论是父盒子还是子盒子增大或者缩小，子盒子都是居中的

CSS基础 水平居中案例的更多相关文章

  1. CSS基础 实战案例 模拟小米官方导航栏

    效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li> ...

  2. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  3. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  4. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  5. CSS基础--常用样式

    一.背景相关 背景颜色 background-color :颜色名称/rgb值/十六进制值 背景图片 background-image :url('') 背景图片平铺方式 background-rep ...

  6. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  7. CSS基础入门

    css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...

  8. 两天学会css基础（二）

    接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...

  9. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

随机推荐

  1. Spring Boot中使用模板引擎Thymeleaf

    一.Thymeleaf简介 Thymeleaf[taɪm lif],百里香叶,是一个流行的模板引擎,该模板引擎采用Java语言开发.Java中常见的模板引擎有Velocity.Freemaker.Th ...

  2. 【Service】【Web】【Middleware】Tomcat

    1. 概念 1.1. 官方网站:tomcat.apache.org 1.2. tomcat的组件 <Server> <Service> <Connector/> & ...

  3. Laravel框架角色、权限

    角色表结构如下: 权限表结构如下: 控制器代码: //递归查询权限列表 public function index(){ $data = ManagePermissionModel::query()- ...

  4. Mysql资料 查询SQL执行顺序

    目录 一.Mysql数据库查询Sql的执行顺序是什么? 二.具体顺序 一.Mysql数据库查询Sql的执行顺序是什么? (9)SELECT (10) DISTINCT column, (6)AGG_F ...

  5. 车载以太网第二弹|测试之实锤-1000BASE-T1 IOP测试实践

    背景 车载以太网通信技术在汽车行业的应用速度远超预期,去年本土OEM已经上市了应用100BASE -T1的车型.今年,应用1000BASE -T1的车型预计也将会量产上市.针对测试而言,带来另外一个难 ...

  6. pwnable_start & ciscn_2019_es_2 & ez_pz_hackover_2016 & pwn2_sctf_2016

    花了两天时间做了这四道题,感觉收获很多.但是这种收获感觉写文章写不出自己的思路,就录制了一个视频. pwnable_start 这道题考察了系统调用,shellcode的编写,和动态调试的知识. ci ...

  7. Python pyecharts绘制漏斗图

    一.pyecharts绘制漏斗图方法简介 funnel.add()方法简介add(name, attr, value, funnel_sort="ascending", funne ...

  8. 『学了就忘』Linux系统管理 — 86、查看系统资源相关命令

    目录 1.vmstat命令 2.dmesg命令 3.free命令 4.查看CPU信息 5.查看本机登陆用户信息 (1)w命令 (2)who命令 6.uptime命令 7.查看系统与内核相关信息 1.v ...

  9. 基于MCRA-OMLSA的语音降噪(一)：原理

    前面的几篇文章讲了webRTC中的语音降噪.最近又用到了基于MCRA-OMLSA的语音降噪,就学习了原理并且软件实现了它.MCRA主要用于噪声估计,OMLSA是基于估计出来的噪声去做降噪.类比于web ...

  10. Java网络多线程开发：java.io.EOFException

    Java网络多线程开发:java.io.EOFException 在实现韩顺平Java的多用户即使通信系统实战项目中: 对于客户端线程的停止,老韩是向服务器端发送一个消息对象,提示服务器端进行资源释放 ...