方法一：

以前设置里面的绿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. LaTeX 控制图片的位置

    加感叹号来忽略“美学”标准. \begin{figure}[!htb] \usepackage{float}\begin{figure}[H]插到你代码相应的位置. 1,插入并列的子图 \usepac ...

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

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

  3. 详解CSS盒模型（转）

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  4. Python 网络爬虫 006 (编程) 解决下载（或叫：爬取）到的网页乱码问题

    解决下载(或叫:爬取)到的网页乱码问题 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 Python 的集成开发环境:PyCharm 20 ...

  5. hihocoder1513 小Hi的烦恼

    传送门 分析 论bitset的妙用......我们利用桶排将输入的数据排序,之后分别考虑5维,a[i][j]表示考虑第i个人第j维的情况下于其它人的大小关系.最后将5维的信息并起来求1的个数即可 代码 ...

  6. Ubuntu16安装GTK+2.0教程

    Step 1 修改清华源(修改完可提高下载速度) 先运行 sudo gedit /etc/apt/sources.list 替换文本内容,保存,退出. # 默认注释了源码镜像以提高 apt updat ...

  7. kaggle Titanic

    # coding: utf-8 # In[19]: # 0.78468 # In[20]: import numpy as np import pandas as pd import warnings ...

  8. ubuntu基础知识与技巧

    root用户与超级用户的切换 (1)  sudo -i (2)  sudo su (3)  su root 安装升级 查看软件xxx安装内容 dpkg -L xxx 查找软件库中的软件 apt-cac ...

  9. ubuntu 删除mysql

    UBUNTU 彻底删除 MYSQL 然后重装 MYSQL 删除 mysql sudo apt-get autoremove --purge mysql-server-5.0sudo apt-get r ...

  10. Microsoft.Baidu.Ali.语音识别/人脸识别

    在第一篇博客里提过图片识别的底层.最精准的图片识别需要海量的数据磨炼.自己写的底层没有以亿为单位的数据支持其实也是个残废品. 此篇不是为了教学.而且在需要的时候抄下来就能用 在此介绍Microsoft ...