方法一：

以前设置里面的绿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. 【转】Sublime Text2中的快捷键一览表(Sublime 键盘快捷键大全 )

    Sublime Text 提供了无比强大的快捷键阵容,如果能够在Coding的时候灵活的使用快捷键,将能够使得你的效率倍增,相信在不久的将来,Sublime Text将是你跨平台使用的最佳Coding ...

  2. centos7虚拟机桥接上网（DHCP）

    centos设置成自动获取ip地址方式(DHCP) 1.打开终端查看网卡信息 #ifconfigifcfg-enp0s3lovirbro 2.编辑文件#vim /etc/sysconfig/netwo ...

  3. TextView下划线，部分文字并响应点击事件(SpannableString)

    TextView useInfo = (TextView) findViewById(R.id.info); useInfo.setText("开始即表示您同意遵守"); Stri ...

  4. php中定义数组的方法

    1.PHP定义数组的格式 数组名=array(); 如:$aa=array();//这样就定义了一个数组, 之后给元素赋值: $aa[0]="9016"; $aa[1]=" ...

  5. Python 网络爬虫 002 (入门) 爬取一个网站之前，要了解的知识

    网站站点的背景调研 1. 检查 robots.txt 网站都会定义robots.txt 文件,这个文件就是给 网络爬虫 来了解爬取该网站时存在哪些限制.当然了,这个限制仅仅只是一个建议,你可以遵守,也 ...

  6. C语言中的static的作用？

    在C语言中,static的字面意思很容易把我们导入歧途,其实它的作用有三条. (1)第一个作用:隐藏. 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性.为理解这句话 ...

  7. 11.树形Model/View实例

    任务1:显示如图的树形结构 思考: 1.使用QTreeView显示. 2.Model使用QStandardItemModel,qt的一个标准model. 3.QStandardItemModel下每一 ...

  8. jqgrid列动态加载

    private void InitGrid(string entityName) { Session["entityName"] = entityName; ArrayList c ...

  9. Xshell连接linux（deepin）时提示ssh服务器拒绝了密码，请再试一次解决方法

    用Xshell root连接时显示ssh服务器拒绝了密码,应该是应该是sshd的设置不允许root用户用密码远程登录 修改 /etc/ssh/sshd_config文件,注意,安装了openssh才会 ...

  10. Linux中的Makefile

    在Linux中Makefile扮演一个非常重要的角色,我们可以以Linux为平台在上面编写我们需要的C程序代码, 对于C语言来说,Linux是一个非常好的平台来学习.使用.调试.验证C代码的平台,其强 ...