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 ...
随机推荐
- adb 使用记录
127.0.0.1:21503 adb kill -server adb start -server adb devices adb logcat | fing "cocos" a ...
- 44道JS难题
国外某网站给出了44道JS难题,试着做了下,只做对了17道.这些题涉及面非常广,涵盖JS原型.函数细节.强制转换.闭包等知识,而且都是非常细节的东西,透过这些小细节可以折射出很多高级的JS知识点. 你 ...
- echo 改变字体颜色
字颜色:30—–37 echo -e “\033[30m 黑色字 \033[0m” echo -e “\033[31m 红色字 \033[0m” echo -e “\033[32m 绿色字 \033[ ...
- [转]使用TortoiseGit处理代码冲突
场景一 user0 有新提交 user1 没有pull -> 写新代码 -> pull -> 提示有冲突 解决办法一 -> stash save(把自己的代码隐藏存起来) ...
- data hazard in CPU pipeline
1, background info 5 stages in CPU pipeline: IF, ID, EX, MM, WB IF – Instruction Fetch ID – Instruct ...
- 莫烦pytorch学习笔记(一)——torch or numpy
Q1:什么是神经网络? Q2:torch vs numpy Numpy:NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(neste ...
- 版本控制git之二 分支 切换分支 创建分支 合并 删除
版本控制git之二 分支 有人把 Git 的分支模型称为它的`‘必杀技特性’',也正因为这一特性,使得 Git 从众多版本控制系统中脱颖而出. 为何 Git 的分支模型如此出众呢? Git 处 ...
- Cesium官方教程13--Cesium和Webpack
原文地址:https://cesiumjs.org/tutorials/cesium-and-webpack/ Cesium 和 Webpack Webpack是非常强大非常流行的JavaScript ...
- HttpException (0x80004005): 无法连接到 SQL Server 会话数据库
ASP.NET 项目运行时出现错误提示:[HttpException (0x80004005): 无法连接到 SQL Server 会话数据库.] ,后排查问题发现是由于项目的Session模式是使用 ...
- oracle中utl_file包读写文件操作实例学习
在oracle中utl_file包提供了一些操作文本文件的函数和过程,学习了一下他的基本操作 1.创建directory,并给用户授权 复制代码 代码如下: --创建directory create ...