H5C3--transform实现任何元素居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .box{
width: 440px;
height: 500px;
background-color: #ccc;
overflow: hidden;
position: relative;
}
.son{
width: 200px;
height: 100px;
background-color: red;
margin: auto;
position: absolute;
/*定位:参照的是父容器*/
left: 50%;
top: 50%;
/*偏移:偏移中的百分比参照的是自身*/
/*定位加变化是解决居中垂直对齐问题的神器、*/
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div> </body>
</html>
H5C3--transform实现任何元素居中对齐的更多相关文章
- 利用table-cell实现元素居中对齐
vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用.所以要实现上下垂直居中对齐,可以采用如下样式 display:table-cell; ...
- 【CSS】定义元素的对齐方式
1.文本内容居中对齐:text-align.扩展用法:父元素嵌套子元素时,且子元素的宽度小于父元素宽度,使用text-align:center,可以实现子元素的居中对齐. <!DOCTYPE h ...
- 网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- CSS居中对齐
CSS实现居中对齐的几种方式 页面布局中,居中对齐是我们经常遇到的场景,现在总结几个常用的方式供大家参考. 场景一:按钮文字居中对齐,line-height + text-align html代码: ...
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）
body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- 利用CSS实现居中对齐
1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...
- CSS实现元素居中原理解析
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...
- CSS元素居中汇总
总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使 margin-left=margin-right 如果设置 marg ...
随机推荐
- UMP系统功能 资源调度
- Python全栈开发：基本数据类型
1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2 ...
- Android开发 Html工具类详解
前言 在一些需求富文本显示或者编辑的开发情况下,数据都是用html的格式来保存文本信息的.而google是有提供解析html的工具类那就是Html.有了Html可以让TextView也支持富文本(其实 ...
- 【10.6NOIP普及模拟】MATH——枚举法
[10.6NOIP普及模拟]MATH 题目简化 一个数列任意删k个数,是得数列中最大的差+最小的差最小 思路 程序1--时超40 暴搜+剪枝. 用类似排列组合的方式,暴搜删或不删 剪枝就是看看剩下的数 ...
- Ionic3 demo TallyBook 实例1
1.创建项目 ionic start TallyBook blank 创建一个空的项目 ionic cordova platform add android 添加andorid平台 io ...
- vue 自定义指令input表单的数据验证
一.代码 <template> <div class="check" > <h3>{{msg}}</h3> <div clas ...
- 单独安装Babel或者Less
1.直接安装Babel法: 1)初始化自动创建package.json npm init 2)首先全局安装Babel. npm install -g babel-cli 3)项目安装Babel. np ...
- kubeadm安装Kubernetes 1.15 实践
原地址参考github 一.环境准备(在全部设备上进行) 3 台 centos7.5 服务器,网络使用 Calico. IP地址 节点角色 CPU 内存 Hostname 10.0.1.45 mast ...
- 在 Node.js 中引入模块：你所需要知道的一切都在这里
本文作者:Jacob Beltran 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58eaf471a58c240ae35bb ...
- python 中的 is 方法 总结
isidentifier: 判断变量名是否合法 iskeyword:是否为内置关键字