子元素在父元素中水平垂直居中
时间:2019-09-17
本文章向大家介绍子元素在父元素中水平垂直居中,主要包括子元素在父元素中水平垂直居中使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效。
div { width: 300px; height: 300px; border: 1px solid red; } div p{ width: 100px; height: 100px; background-color: green;
/*float: left; !*如果设置了浮动,则自动居中就会失效。*!*/ margin: 0 auto; }
2. 水平居中,子父元素宽度固定,父元素设置 text-align: center; 子元素设置 display: inline-block; 子元素不能设置浮动,否则居中失效。
div { width: 300px; height: 300px; border: 1px solid red; text-align: center; } div p{ width: 100px; height: 100px; background-color: green; margin: 0; overflow: auto; /*float: left; !*如果设置了浮动,则自动居中就会失效。*!*/ display: inline-block; /*display: inline;*/ /*display: inline-flex;*/ }
1. 水平垂直居中,子元素相对于父元素绝对定位,子元素top,left设置为50%,子元素margin的top,left减去自身宽高的一半。
div { width: 300px; height: 300px; border: 1px solid red; position: relative; } div p{ width: 100px; height: 100px; background-color: green; margin: 0; /*margin-top: 10%; !*百分比相对于父元素*!*/ /*padding-top: 10%; !*百分比相对于父元素*!*/ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }
2. 水平垂直居中,子元素相对于父元素绝对定位,将子元素的top,right,bottom,left均设为0,然后设置子元素 margin: auto;
div { width: 300px; height: 300px; border: 1px solid red; position: relative; } div p{ width: 100px; height: 100px; background-color: green; margin: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
3. 水平垂直居中,父元素设置 display: table-cell; vertical-align: middle;子元素设置 margin: auto;
div { width: 300px; height: 300px; border: 1px solid red; display: table-cell; vertical-align: middle; } div p{ width: 100px; height: 100px; background-color: green; margin: 0; overflow: auto; margin: auto; }
4. 水平垂直居中,子元素相对定位,top,let设为50%,transform: translate(-50%, -50%);
div { width: 300px; height: 300px; border: 1px solid red; } div p{ width: 100px; height: 100px; background-color: green; margin: 0; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }
这种方式不会释放子元素在文档流中的位置
我是标题
5. 水平垂直居中,子元素相对于父元素绝对定位,子元素top,let设为50%,transform: translate(-50%, -50%);
div { width: 300px; height: 300px; border: 1px solid red; position: relative; } div p{ width: 100px; height: 100px; background-color: green; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
top,left百分比是相对父元素的,translate的百分比是相对自身的
我是标题
6. 水平垂直居中,父元素设置 display: flex; justify-content: center; align-items: center;
div { width: 300px; height: 300px; border: 1px solid red; display: flex; justify-content: center; align-items: center; } div p{ width: 100px; height: 100px; background-color: green; margin: 0; overflow: auto; }
justify-content: center; 是让所有的子元素作为一个整体居中
原文地址:https://www.cnblogs.com/yingtoumao/p/11537941.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android实现QQ侧滑(删除、置顶等)功能
- Android通过XListView实现上拉加载下拉刷新功能
- Android自定义View实现圆形切图效果
- Android仿iOS侧滑退出当前界面功能
- android仿支付宝密码输入框效果
- TextInputLayout输入框控件的悬浮标签
- android使用SwipeRefreshLayout实现ListView下拉刷新上拉加载
- Android自定义ScrollView使用自定义监听
- Android开发实现拨打电话与发送信息的方法分析
- Android 3.0引入的异步加载机制Loader
- 自定义注解1-实现spel表达式
- 自定义注解2-动态修改注解的属性值
- 自定义注解3-组合注解
- swagger增加接口版本管理
- 数据安全02-Base64 算法原理