css让元素居中显示
通常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和
margin-left:-[元素宽度的一半] , 但是当我们的元素宽高不是固定的时候, 这就难办了,
还好css3里面的translate给了我们很大的方便呀2333
html file:
<body>
<div class='parentelement'>
<div class='childelement'>
想让子元素在父元素内水平、垂直居中
</div>
</div>
</body>
css file:
.parentelement{
width:200px;
height:200px;
background-color:red;
position:relative;
}
.childelement{
width:50%;
height:50%;
background-color:green;
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
css让元素居中显示的更多相关文章
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css 使元素居中
css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...
- css实现元素居中
参见详细教程,该教程涵盖了所有居中的情况: https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1)文本,图片等行 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- CSS实现元素居中原理解析
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...
- css实现一行居中显示,两行靠左显示,超过两行以引号省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css 字体上下居中显示 解决安卓手机line-height的偏差
1.字体左右居中显示 text-align: center <div class="font"> 上下居中 </div> .font{ width: ...
- css 浮动元素居中
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- kendoWindow 与 bootbox 冲突,显示层次问题
今天在使用bootbox做弹出提示遇到些麻烦,由于使用kendoWindow先弹出数据输入窗口, 然后在检核输入时,又用bootbox做为提示窗口,这下悲剧了,后弹出的bootbox窗口总是在kend ...
- 向JSP页面输入信息
/** * ajax responseTEXT write; * @param request * @param response * @param str */ public static void ...
- java命名规范有感
一. 注()里的内容是自己的吐槽 二. 命名规约 不能以下划线或美元符开始和结尾.反例:_name,$name,name_,name$.(我就从来没这样用过) 不能使用拼音和英文组合方式命名.更不能以 ...
- 大毕设-MATLAB-FFT实现
引用来自:http://blog.csdn.net/sinwel/article/details/8115673 %仿真参数中的含义 % Ts 表示间隔Ts时间采样,这个越小越接近连续信号,而实际上不 ...
- Odoo 中的 Controller
来自 Odoo处理HTTP请求的接口用的Contoller类,封装于web模块中. --------------------------------------------------------- ...
- 【干货】解密监控宝Docker监控实现原理
分享人高驰涛(Neeke),云智慧高级架构师,PHP 开发组成员,同时也是 PECL/SeasLog 的作者.8 年研发管理经验,早期从事大规模企业信息化研发架构,09 年涉足互联网数字营销领域并深入 ...
- PowerDesginer 生成的Oracle 11g 组合触发器代码编译错误(29): PLS-00103
问题描述: 采用PowerDesigner15针对Oracle 11g 创建物理数据模型,想实现一个字段的自增,采用如下步骤: 1.创建序列,命名为Sequence_1; 2.在自增字段编辑窗口中,选 ...
- js常用
window.navigator.userAgent.toLowerCase().indexOf("msie") != -1 是否是IE浏览器
- 显示天气预报的Demo
实现的效果如下所示: 代码如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewCo ...
- ReactiveCocoa框架学习<一>
1.Cocoapods导入ReactiveCocoa: use_frameworks! target 'RACDemo' do pod 'ReactiveObjC', '~> 2.1.0' en ...