方法一：

以前设置里面的绿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. 3-2 zk客户端连接关闭服务端，查看znode

    使用ZooKeeper官方提供的Client来连接.路径类似的结构. 连接到我们的门户HOST. quota属于zookeeper.quota是子节点,zookeeper是父节点.quota其实是一个 ...

  2. memcache windows64 位安装

    --环境: windows 2008 R2 64位 wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-x64 --目标: 实现 php 用memcach ...

  3. 关于jdk1.5之后的自定拆装箱

    我们都知道jdk在1.5版本之后,增加了一些新特性,我们称之为语法糖,有:1.泛型,2.foreach增强for循环,3.自动拆装箱,4.可变参数,5.枚举,6.静态导入 public class T ...

  4. 2018网络预选赛 徐州G 线段树

    线段树,假设求(x1,y1)点的贡献,就找所有比该点出现时间晚,且x坐标大于x1的点中y最大的,贡献就是Y-y1,由于题目条件限制,不可能有x坐标大于(x1,y1)且y坐标大于y1的点,所以贡献肯定为 ...

  5. Freemarker 使用注意事项

    上次借助 Freemaker 模板引擎来动态构造 Kylin 访问的 SQL,在使用过程中,遇到了一些坑. ${} 输出变量时需要注意: 示例 WHERE shop_id =  ${val} 里的 v ...

  6. 数据库之_CRUD

    CRUD是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删除(Delete)几个单词的首字母简写.主要被用在描述软件系统中DataBase或者持久层的基本 ...

  7. MinGW lapack 在windows 上安装

    MinGW基本的配置环境 编译安装 方案一:MinGW Makefiles 我的配置好之后mingw文件夹下没有mingw32-make.exe,使用 mingw-get install mingw3 ...

  8. Java-马士兵设计模式学习笔记-工厂模式-模拟Spring读取Properties文件

    一.目标:读取properties文件,获得类名来生成对象 二.类 1.Movable.java public interface Movable { void run(); } 2.Car.java ...

  9. DBUtils工具类和DBCP连接池

    今日内容介绍 1.DBUtils2.处理结果集的八种方式3.连接池4.连接池的用法1 PrepareStatement接口预编译SQL语句 1.1 预处理对象 * 使用PreparedStatemen ...

  10. emr问题处理

    --通过his病历号查询emr中对应的患者ID --通过患者ID找出患者所有的病历集合ID --通过病历集合查找患者所有的病历 --通过病历dataID查找对应的病历数据,病历存在大字段中 '; -- ...