通常在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让元素居中显示的更多相关文章

  1. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  2. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  3. css 使元素居中

    css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...

  4. css实现元素居中

     参见详细教程,该教程涵盖了所有居中的情况: https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1)文本,图片等行 ...

  5. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  6. CSS实现元素居中原理解析

    在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...

  7. css实现一行居中显示，两行靠左显示，超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css 字体上下居中显示 解决安卓手机line-height的偏差

      1.字体左右居中显示 text-align: center   <div class="font"> 上下居中 </div> .font{ width: ...

  9. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. 机器学习--Classifier comparison

    最近在学习机器学习,学习和积累和一些关于机器学习的算法,今天介绍一种机器学习里面各种分类算法的比较 #!/usr/bin/python # -*- coding: utf-8 -*- "&q ...

  2. java:关于文件下载

    开发中遇到的问题 一. 场景描述:用户先指定下载路径,服务器将资源文件下载到指定的路径. 首先:该系统采用的是B/S架构,即浏览器.服务器(.数据库).    单纯通过B/S架构,就想要在服务器中去操 ...

  3. Android笔记之——线程

    Java: package com.example.test_ui_thread01;import android.support.v7.app.AppCompatActivity;import an ...

  4. 更改XAMPP中MySQL数据库的端口号

    更改XAMPP中MySQL数据库的端口号 如果电脑上已安装MySql数据库,还想用XAMPP中自带的数据库就需要更改XAMPP中数据库的端口号,避免和已安装的数据库冲突.本例以更改为3307端口号为例 ...

  5. Oracle 更新表(另一张表)

    Update a set(a.province,a.city)= (select province,city from b where b.mobile=a.mobile)

  6. UML类图画法及其之间的几种关系(转)

    UML类图画法及其之间的几种关系 最近做重构项目,需要画一下类图,发现类图的画法及其之间的几种关系已经淡忘了很多,所以整理总结一下,有问题的地方大家可以一起讨论下. 文章目录如下: 类图画法 类之间的 ...

  7. thinkphp 数据访问

    <?php namespace Admin\Controller; use Think\Controller; class MainController extends Controller { ...

  8. python第十九天-----Django进阶

    1.机智的小django为我你们提供了快捷的表单验证! from django.shortcuts import render, HttpResponse,redirect from django i ...

  9. CentOS 6.5 下离线安装nginx

    一.由于linux下安装nginx 需要  zlib zlib-devel openssl openssl-devel pcre pcre-devel gcc这些依赖,而这些依赖打安装包在我们系统的光 ...

  10. Ruby Unit Test

    require 'test/unit' module Test::Unit::Assertions def assert_equal_unorder(exp, act, msg = nil) # ms ...