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. Linux:sqlplus

    [oracle@hb shell_test]$ cat echo_time #!/bin/sh 一.最简单的调用sqlplus sqlplus -S "sys/unimas as sysdb ...

  2. 详解 Java I/O 与装饰者模式

    1.I/O分类与装饰者模式 基本java I/O包含两种类型的流,字节流(inputStream.outputStream)与字符流(Writer,Reader),关于I/O操作类的设计,用到了装饰者 ...

  3. 【JAVA今法修真】 第二章 一气化三清 线程分心念

    这是我的微信公众号,希望有兴趣的朋友能够一起交流,也希望能够多多支持新人作者,你的每一份关注都是我写文章的动力:南橘ryc 天有八纪,地分九州,万法仙门与天道剑宗一并坐落在东北方通辽州. 与李小庚想象 ...

  4. Airtest结合tidevice实现IOS自动化测试

    这篇博文内容,是基于之前的配置而来的.我们可以先回顾一下之前博文,Windows搭建mac黑苹果系统:WebDriverAgent重签名爬坑记 . 今天来分享下如何通过 tidevice实现IOS自动 ...

  5. 关于python中显存回收的问题

    技术背景 笔者在执行一个Jax的任务中,又发现了一个奇怪的问题,就是明明只分配了很小的矩阵空间,但是在多次的任务执行之后,显存突然就爆了.而且此时已经按照Jax的官方说明配置了XLA_PYTHON_C ...

  6. hooks中,useEffect无限调用问题产生的原因

    前言:我在我的另一篇博客中有说道useEffect监听对象或者数组时会导致useEffect无限执行,并给予了解决方案-useEffect无限调用问题 .后来我想从其产生根源去理解并解决这个问题. 原 ...

  7. Cyber Apocalypse 2021 pwn write up

    Controller 考点是整数溢出和scanf函数的引发的栈溢出漏洞,泄露libc地址将返回地址覆盖成one_gadgets拿到shell. 1 from pwn import * 2 3 p = ...

  8. 前置任务（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 在[前置任务列]中编辑任务关联,这是个正经的设置. 说他"正经",是因为在[手动模式]下,这个设置也是 ...

  9. CF1099A Snowball 题解

    Content 有一个重量为 \(w\) 的雪球从高度为 \(h\) 的位置开始滚落,每秒它的高度会减少 \(1\),同时在高度为 \(i\) 的位置它的重量会增加 \(i\).在雪球滚动的路线上还有 ...

  10. java 多线程：Thread类;Runnable接口

    1,进程和线程的基本概念: 1.什么是进程: 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机 ...