css水平垂直居中(绝对定位居中)
使用绝对定位有个限制就是父集必须设置一个固定的高度。
首先HTML
1 <div id="box">
2 <div class="child"></div>
3 </div>
CSS
1 #box {
2 position: relative;
3 height: 500px;
4 background: red;
5 }
6 .child {
7 width: 100px;
8 height: 100px;
9 background: blue;
10 margin: auto;
11 position: absolute;
12 top: 0;
13 right: 0;
14 bottom: 0;
15 left: 0;
16 }
示例图:
css水平垂直居中(绝对定位居中)相关推荐
- css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
- css 水平垂直居中实现方式
css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 <div ...
- css水平垂直居中四种常用方式
css水平垂直居中 第一种:flex布局水平垂直居中 思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
- css水平垂直居中对齐方式
css水平垂直居中总共有四种方法 ① 使用绝对定位 注意:使用绝对定位居中需要固定宽高 position:absolute; top:0; left:0; bottom:0; right:0; wid ...
- 16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
- html 水平垂直居中,css水平垂直居中有几种实现方式?
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
- CSS 水平垂直居中
方法一: 容器确定宽高:知识点:transform只能设置在display为block的元素上. <head> <meta charset="UTF-8"> ...
- CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
- 前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录 一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
- 八十七、CSS水平垂直居中的布局方式
@Author:Runsen 2020/11/30. 周一.今天又是奋斗的一天. 文章目录 水平居中 inline-block+ text-algin 属性配合使用 子元素block和margin属性 ...
最新文章
- 作业 3 应用分支与循环结构解决问题 统计字符个数
- 指针02 - 零基础入门学习C语言42
- Servlet、Filter、Listener总结
- linux shc shell脚本_详解shell脚本加密解密软件—gzese和shc
- python day3 python基础
- python编程入门 适合于零基础朋友-[零基础学python]复习if语句
- 【Dairy】2016.11.5
- 协同过滤算法_《推荐系统实践》3.基于物品的协同过滤算法
- NotifyIcon实现托盘程序
- MonkeyTest
- 软件工程之项目开发计划
- 鲁棒控制——线性矩阵不等式处理(俞立)(1)
- 《手机游戏引擎架构》信息总汇
- node创建ETH地址及导出私钥
- Idea中使用maven 与pom文件讲解
- 阿里P9专家右军:以终为始的架构设计
- 湿寒阳虚体质如何艾灸
- 网关系统就该这么设计(万能通用),稳的一批!
- 去除桌面应用程序快捷方式的图标
- 2022-2028年全球与中国零售会计软件行业发展趋势及竞争策略研究