···设置两个盒子

<div class="parent">
  <div class="child">
  </div>
</div>

方法一:absolute

<!-- //父元素相对定位,子元素绝对定位 -->

<!-- //绝对定位盒子模型有个特点:left + right + width + padding + margin = 包含块的宽度;此时可以将left、right设置为0;padding、margin未设置是默认为0;所以将margin设置为auto,使得元素自动居中; -->

<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.parent{
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.child{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: pink;
}
</style>

方法二:absolute + 负margin

.parent{  
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black; 
}
.child{
  position: absolute;
  left: 50%; top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  background: pink;
}
方法三:flex布局
  //只需设置父节点属性,无需设置子元素
  // 父元素设置
  display: flex;
  justify-content:center;
  align-items:Center;
 

CSS布局--垂直水平居中的更多相关文章

  1. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  2. css实现垂直水平居中的方法(个数不限)?

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  3. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  4. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  5. CSS布局:水平居中

    前言 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手.下面以分页组件为实例来记录各种实现方式. common.css <style type=& ...

  6. css文本垂直水平居中

    一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...

  7. CSS实现垂直水平居中

    HTML结构: <div class="wrapper"> <div class="content"></div> < ...

  8. Css实现垂直水平居中的六种方法

    经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...

  9. CSS中垂直水平居中

    方法一:使用flex布局,父级元素设置justify-content和align-items <div class="cont"> <div class=&quo ...

随机推荐

  1. cf835(预处理 + 记忆化dp)

    题目链接: http://codeforces.com/contest/835/problem/D 题意: 定义 k 度回文串为左半部分和右半部分为 k - 1 度的回文串 . 给出一个字符串 s, ...

  2. 自制Java虚拟机(四)-对象、new、invokespecial

    自制Java虚拟机(四)-对象.new.invokespecial 一.对象的表示 刚开始学Java的时候,图书馆各种教程,书名往往都是“Java面向对象高级编程”,通常作者都会与C++做个比较,列出 ...

  3. POJ2488 A Knight's Journey

    题目:http://poj.org/problem?id=2488 题目大意:可以从任意点开始,只要能走完棋盘所有点,并要求字典序最小,不可能的话就impossible: 思路:dfs+回溯,因为字典 ...

  4. 关于unique去重

    嗯.... unique这个东西也是一个冷门知识..... 但是在有时候它还是比较好用的东西... 下面就在详细代码中看unique是如何实际应用的....它主要是用于数组去重 #include< ...

  5. Java实现快排+小坑+partition的两种思路

    在做一道剑指Offer的题的时候,有道题涉及到快排的思路,一开始就很快根据以前的思路写出了代码,但似乎有些细节不太对劲,自己拿数据试了下果然.然后折腾了下并记录下一些小坑,还有总结下划分方法parti ...

  6. Hadoop 解除 “Name node is in safe mode”(转)

    运行Hadoop程序时,有时候会报以下错误: org.apache.hadoop.dfs.SafeModeException: Cannot delete /user/hadoop/input. Na ...

  7. 机器学习框架ML.NET学习笔记【4】多元分类之手写数字识别

    一.问题与解决方案 通过多元分类算法进行手写数字识别,手写数字的图片分辨率为8*8的灰度图片.已经预先进行过处理,读取了各像素点的灰度值,并进行了标记. 其中第0列是序号(不参与运算).1-64列是像 ...

  8. 判断两个IP地址是不是属于同一子网的方法

    一个IP地址有三种写法: 第一种,单个IP,如192.168.55.28 第二种,IP/子网掩码,如192.168.55.28/255.255.255.0 第三种,IP/子网掩码长度,如192.168 ...

  9. ACdream 1431——Sum vs Product——————【dfs+剪枝】

    Sum vs Product Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) S ...

  10. RS485相关学习

    TIA-485-A (Revision of EIA-485) Standard ANSI/TIA/EIA-485-A-1998Approved: March 3, 1998Reaffirmed: M ...