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 ...
随机推荐
- Error:Execution failed for task ':app:validateSigningDebug'.
今天出差回来 第一天 把项目重新移植到新的电脑上 一运行 给我报错了 ! 这个是签名的路径错误 我们需要重新导一下路径就可以了 点击左上角 File -> project structu ...
- gulp 前端构建工具使用
gulp 前端构建工具使用 1.新建一个web h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...
- task code
using System; using System.Collections.Generic; using System.Threading; using System.Threading.Tasks ...
- 纯CSS样式写刘海屏效果
1. 效果: 2. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 服务器迁移部署OmsEdi
基本配置 绑定 高级设置
- SPSS超详细操作：分层回归(hierarchical multiple regression)
SPSS超详细操作:分层回归(hierarchical multiple regression) 1.问题与数据 最大携氧能力(maximal aerobic capacity, VO2max)是评价 ...
- 模板——网络流Dinic
感谢这位大佬的博客:https://www.cnblogs.com/SYCstudio/p/7260613.html 给予了我莫大的帮助! 主要说一下网络流的几个注意点: 1.和二分图匹配相似,无法继 ...
- js 获取字符串中某字符第二次出现的下标
var res = "a-b-c-d";var index = find(res,'-',1); //字符串res中第二个‘-’的下标 var ress = res.substri ...
- Java超简明入门学习笔记（二）
Java编程思想第4版学习笔记(二) 第三章 操作符 & 第四章 控制执行流程(流程控制语句) 第三章和第四章的内容主要是讲操作符和流程控制语句,Java的大多数操作符和流程控 ...
- vue 监听返回
mounted: function() { //使用keep-alive时可以放在activated内 if (window.history && window.history.pus ...