方法一：

以前设置里面的绿div总是会使用{position:absolute;left:50%;top:50%;margin-left:-div宽度的一半;margin-top:-div高度的一半}。

这样比较麻烦，还需要自己计算高度和宽度，后来发现可以使用transform:translate(-50%,-50%);来代替margin，就能很好的解决了。

代码：

<!DOCTYPE html>

<html>

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title></title>

　　　　<style>

　　　　.box{

　　　　　　width:400px;

　　　　　　height:400px;

　　　　　　margin: auto;

　　　　　　position:relative;

　　　　　　border:1px solid black;

　　　　}

　　　　.content{

　　　　　　width:200px;

　　　　　　height:200px;

　　　　　　background:green;

　　　　　　position:absolute;

　　　　　　left:50%;

　　　　　　top:50%;

　　　　　　transform:translate(-50%,-50%);

　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div class="box">

　　　　　　<div class="content"></div>

　　　　</div>

　　</body>

</html>

方法二：

<div class="box4">

    <div class="child4"></div>

</div>
.box4{

    width:100px;

    height:100px;

    background:gray;

    position:relative;

}

.child4{

    background:red;

    width:50px;

    height:50px;

    margin:auto;

    position:absolute;

    top:0;

    left:0;

    bottom:0;

    right:0;

}

方法三：

<div class="box1">

    <div class="child1"></div>

</div>
　　　　　　　 .box1{

                width:100px;

                height:100px;

                background:gray;

                text-align:center;/*居中效果只对文本内容和行内元素有效*/

                display:table-cell;

                vertical-align:middle;

            }

            .child1{

                display:inline-block;

                background:red;

                width:50px;

                height:50px;

            }

方法四：

<div class="box2">

    <div class="child2"></div>

</div>
.box2{

    width:100px;

    height:100px;

    background:gray;

    display:table-cell;

    vertical-align:middle;

}

.child2{

    margin:0 auto;/*在元素本身上设置，可以实现块级元素水平居中*/

    background:red;

    width:50px;

    height:50px;

}

方法五：

display:flex + margin:auto

<div class="box2">

    <div class="child2"></div>

</div>
.box2{

    width:100px;

    height:100px;

    background:gray;

    display:flex;

}

.child2{

    margin:auto;

    background:red;

    width:50px;

    height:50px;

}

如何用css让一个容器水平垂直居中的更多相关文章

  1. 公司的一个面试题：如何用css让一个容器水平垂直居中？

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  3. 七种css方式让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  4. 【原】用css让一个容器水平垂直

    这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...

  5. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  6. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  7. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  8. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  9. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

随机推荐

  1. ubuntu 12.04 下 eclipse关联 source code

    一.JDK source code 命令行中: sudo apt-get install openjdk-7-source 下好的jdk源码在 Linux 在目录 usr/lib/jvm/openjd ...

  2. HTML->CSS->JS->PHP的顺序及相关网址（转）

    如果你有耐心坚持一年以上的话, 我会推荐HTML->CSS->JS->PHP的顺序来学习. 1. HTML学习:首先学习HTML,HTML作为标记语言是非常容易学的,把w3schoo ...

  3. 使用Javascript Ajax 通信操作JSON数据 [上]

    以前只是知道json的格式而已,也做过的是从数据库获得数据然后弄成json的格式然后赋给HighCharts生成曲线,先把数据库的数据使用array()函数转换成数组,然后使用json_encode( ...

  4. Executor线程池

    Executor线程池框架: 使用线程池的优点: 1.重用存在的线程 2.减少对象创建.消亡的开销 3.性能佳 4.可有效控制最大并发线程数,提高系统资源的使用率 5.避免过多资源竞争,避免堵塞 6. ...

  5. PCL—关键点检测（NARF）低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5051533.html 关键点检测本质上来说,并不是一个独立的部分,它往往和特征描述联系在一起,再将特征描述和识别. ...

  6. php学习笔记-POST和GET的区别

    POST和GET都可以用来提交数据. POST方法提交的数据在浏览器的地址栏是不可见的,当然利用一些工具是可以看到的,而GET方法提交的数据在地址栏是可见的.两者比较,POST更安全一点. POST方 ...

  7. Flask框架 之 功能详解

    浏览目录 配置文件 路由系统 视图 请求相关 响应 模板渲染 session 闪现 中间件 蓝图(blueprint) 特殊装饰器 配置文件 知识点 给你一个路径 “settings.Foo”,可以找 ...

  8. debug－－－null Pointer Exception--一步步查找(1)

    找到对应的226行代码: 通过debug打断点,然后选中需要查看的代码,右击,选择Evaluate Expresstion,选择确认,就可以弹出具体的值,发现真的为null. 通过simon帮忙分析, ...

  9. 缓存淘汰算法之LRU

    1. LRU1.1. 原理 LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”. ...

  10. Socket编程--并发server

    Socket地址复用 int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); int ...