CSS基础 水平居中案例
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基础 水平居中案例的更多相关文章
- CSS基础 实战案例 模拟小米官方导航栏
效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li> ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS基础--常用样式
一.背景相关 背景颜色 background-color :颜色名称/rgb值/十六进制值 背景图片 background-image :url('') 背景图片平铺方式 background-rep ...
- CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- CSS基础入门
css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...
- 两天学会css基础（二）
接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
随机推荐
- 监控网站是否异常的shell脚本
本节内容:shell脚本监控网站是否异常,如有异常就自动发邮件通知管理员. 脚本检测流程,如下:1,检查网站返回的http_code是否等于200,如不是200视为异常.2,检查网站的访问时间,超过M ...
- AOP切入点的配置
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- 正则表达式入门（js版）
什么是正则表达式 正则表达式 Regular Expression (构造函数 RegExp) 用于字符串匹配规则 要么匹配字符,要么匹配位置 如何新建正则表达式 字面量 /[ab]/gim cons ...
- 深入分析 Java ZGC
传统的垃圾回收 CMS 与 G1 停顿时间瓶颈 ZGC 概览 深入 ZGC 原理 标记 Marking 着色指针 Reference Coloring Relocation 重映射和读屏障 Remap ...
- apt和apt-get的区别
目录 一.简介 二.apt vs apt-get 为什么apt首先被引入? apt和apt-get之间的区别 apt和apt-get命令之间的区别 我应该使用apt还是apt-get? 三.结论 一. ...
- HCNP Routing&Switching之组播技术-组播协议IGMP
前文我们了解了组播地址相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15616740.html:今天我们来聊一聊组播协议中IGMP协议相关话题: 组播 ...
- LightningChart .NET v.10.2.1已经发布了!
LightningChart .NET v.10.2.1已经发布了! 了解更多关于兼容性和优化方面的最新改进. 主要改进 我们很高兴地宣布LightningChart .NET产品系列的第三个主要版本 ...
- axb_2019_fmt32
一道格式字符串的题目,拿到题目例行检查一下 32位的程序开机了nx的保护,将程序放入ida中 发现没有system函数于是进入main主函数进行代码审计 可以看到printf存在明显的格式字符串漏洞 ...
- springboot学习(一)
最近想学习springboot所以在网上找了很多文章参考怎么构建springboot项目以及集成mybatis 集成mybatis的部分参考了这两篇文章 https://blog.csdn.net/t ...
- LuoguP5238 整数校验器 题解
Content 给定两个整数 \(l,r\),再给定 \(T\) 个整数,请判断对于每个整数 \(x\),是否满足以下要求: \(x\in[l,r]\). \(x\) 格式合法. 数据范围:\(-2^ ...