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 ...
随机推荐
- Amazon AWS
- 新安装一个eclipse，导入一个web项目，右键点击项目选择Properties,找不到project facets和Server选项。
解决方式: 1.点击:eclipse导航栏中点击Help->Install New Software 2.点击Add添加 3在弹出框中填写以下信息 name:keep(名字随便取) locati ...
- pg总览
一.编译安装初始化等 ./configure --prefix=/release --with-openssl --without-ldap --with-libxml - -enable-threa ...
- Python面向对象学习
以下面例子作为面向对象基础介绍,类比java里的面向对象既可以,大同小异 class Employee(): raiseAmount=1.04 employeeNum= def __init__(se ...
- springboot与安全
概念: 安全 Spring Security是针对Spring项目的安全框架,也是Spring Boot底层安全模块默认的技术选型.他可以实现强大的web安全控制.对于安全控制,我们仅需引入sprin ...
- 通过挂钩NtCreateSection监控可执行模块
通过挂钩 NtCreateSection 监控可执行模块 在 Win32 中,我们使用 CreateFileMapping 来创建映射文件对象,函数原型如下: HANDLE CreateFileMap ...
- mysql内建命令快速手记 — 让手指跟上思考的速度（一）
在微信公众号上看到一篇文章说的很好,意思是说,大牛在尝试各种方案的时候可能并没有超神的预测和筛选能力 只是你通常测试一种情况时,大神已经测试了好几种方案了,讲的是"为什么大多数程序员不喜欢写 ...
- 第一周课堂笔记2th
上课笔记2th https://mubu.com/doc/2gxvIvVLG0(老师笔记网址) 1. python python运行过程 把源代码转化成字节码(机器不能识别) 也可能不产生py ...
- Mybatis的插件 PageHelper 分页查询使用方法
参考:https://blog.csdn.net/ckc_666/article/details/79257028 Mybatis的一个插件,PageHelper,非常方便mybatis分页查询,国内 ...
- Spring 社区的唯一一个国产开源项目 - Spring Cloud Alibaba 毕业了
阿里妹导读:一年多前,Java 界最近发生了一件大事,阿里开源 Spring Cloud Alibaba,并推出首个预览版.Spring Cloud 本身是一套微服务规范,并不是一个拿来即可用的框架, ...