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. Jenkins插件维护

    目录 一.简介 二.插件安装 在线安装插件 上传安装插件 从其它jenkins复制插件 配置插件加速器 一.简介 除了在线安装,还可以官网插件下载地址中进行下载安装,如果访问缓慢可以用清华镜像站. 二 ...

  2. Jenkins配置java项目

    目录 一.场景介绍 二.项目配置 配置插件 配置项目 一.场景介绍 在部署完Jenkins后,需要将现有的maven项目(Jenkis的开源插件),放到Jenkins上,用于自动化运维的改造. 项目地 ...

  3. MySQL如何使用WITH ROLLUP函数

    一.WITH ROLLUP函数适用于跟在GROUP BY 字段后面进行分组求和使用 SELECT t1.`产品名称`,SUM(t1.`数量`),SUM(t1.`金额`),t1.`日期` FROM sh ...

  4. 新手指南：顶象验证码如何接入微信小程序？

    自2017年小程序发布以来,经过4年的快速发展,小程序已然成为企业互联网布局不可或缺的一环.无论是互联网企业还是拥抱互联网的传统企业,无论是服务导向型企业还是产品导向型企业,小程序都为用户提供了一种轻 ...

  5. [BUUCTF]PWN——[V&N2020 公开赛]babybabypwn

    [V&N2020 公开赛]babybabypwn 附件 步骤: 例行检查,64位程序,保护全开 本地试运行一下,看看程序的大概情况 64位ida载入,看一下main函数 sub_1202()函 ...

  6. [BUUCTF]PWN7——[OGeek2019]babyrop

    [BUUCTF]PWN7--[OGeek2019]babyrop 题目网址:https://buuoj.cn/challenges#[OGeek2019]babyrop 步骤: 例行检查,32位,开启 ...

  7. Tornado WEB服务器框架 Epoll-- 【Mysql数据库】

    5.1 数据库 与Django框架相比,Tornado没有自带ORM,对于数据库需要自己去适配.我们使用MySQL数据库. 在Tornado3.0版本以前提供tornado.database模块用来操 ...

  8. textarea控件好奇怪啊，用<s:if>标签居然不在一行回出现很多的空格，奇葩啊

    textarea控件好奇怪啊,用<s:if>标签居然不在一行回出现很多的空格,奇葩啊

  9. vue-子组件创建/注册/使用流程

    流程分为三步 非单文件组件:(实际不用,因为很麻烦,框架都是多文件组件) 局部注册 1.创建一个组件 const school = Vue.extend({ // 传入配置对象 // 子组件配置对象不 ...

  10. 【LeetCode】961. N-Repeated Element in Size 2N Array 解题报告（Python & C+++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典 日期 题目地址:https://leetcod ...