方法一：

以前设置里面的绿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. Yaffs2根文件系统制作

    Yaffs2根文件系统制作 环境: 交叉编译环境:4.4.6 开发平台:s3c2416 1,编译busybox 获取busybox源码busybox-1.17.2.tar (http://www.bu ...

  2. Arduino Uno 在win7 64位下的驱动问题

    1.解压[mdmcpq.inf_amd64_neutral_fbc4a14a6a13d0c8.rar],将[mdmcpq.inf_amd64_neutral_fbc4a14a6a13d0c8]文件夹复 ...

  3. android下db-journal文件作用

    在学习数据库sqlite的过程中,发现在源文件包里除了生成db类型的数据库文件,还生成了db-journal类型的同名文件 查询网上资料后知道该文件是sqlite的一个临时的日志文件,主要用于sqli ...

  4. SQL IN, NOT IN, EXISTS, NOT EXISTS

    IN与EXISTS执行流程 IN:在查询的时候,首先查询子查询的表,然后将内表和外表做一个笛卡尔积,然后按照条件进行筛选.所以相对内表比较小的时候,in的速度较快.(IN时不对NULL进行处理) EX ...

  5. ES01 数据类型、正则表达式、身份证校验

    1 基本数据类型 参见W3C的教程即可 2 正则表达式 参考博文:点击前往 3 身份证校验 参考博文:点击前往 <div class="panel panel-primary" ...

  6. oracle错误汇总解决

    1.ORA-12514 http://blog.sina.com.cn/s/blog_5007d1b10100oqo8.html

  7. Luogu 4323 [JSOI2016]独特的树叶

    新技能get 树哈希,考虑到两棵树相同的条件,把每一个结点的哈希值和树的siz写进哈希值里去. 做出A树每一个结点为根时的树的哈希值丢进set中,然后暴力枚举B树中度数为1的点,求出删掉这个点之后的哈 ...

  8. vue 之 let 和const

    浏览目录 let const let es6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 上面代码在代码块之中,分别用let和var声明了 ...

  9. 精美3D中国象棋

    本人2013年的巅峰之作,现在已经完全免费放送.象棋界面的史诗革命.当前下载版本仅支持Windows 平台. 操作: 方向键的 上,下,左,右 控制棋盘翻转.Home 键回到初始状态,End按键回到平 ...

  10. easyui 插入中间行

    function inserrow() { var index_dx = 0; var index_lt = 0; var rows = $('#dg').datagrid('getRows')//获 ...