我自己感觉，第四种比较常用

<title>无标题文档</title>
<style>
        .parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
          }
         .child {
            width:200px;
            height:200px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0; 
            background-color: red;
         } 
  
  
        .parent1 {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
        }
        .child1{
            width:200px;
            height:200px;
            display:inline-block;
            background-color: red;
        } 
  
  
  .parent2{
            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .child2{
            width:200px;
            height:200px;
            background-color: red;
        }
  
  
  
   .parent3 {
            width:800px;
            height:500px;
            border:2px solid #000;
            position:relative;
        }
        .child3 {
            width:300px;
            height:200px;
            margin:auto;
            position:absolute;/*设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小*/
            left:50%;
            top:50%;
            margin-left: -150px;
            margin-top:-100px;
            background-color: red;
        } 
 
</style>

</head>

<body>
<div class="parent">
   <div class="child">第一种方法</div>
</div>

<div class="parent1">
   <div class="child1">第二种方法</div>
</div>

<div class="parent2">
   <div class="child2">第三种方法</div>
</div>

<div class="parent3">
   <div class="child3">第四种方法</div>
</div>
 
</body>
</html>

一个div相对于外层的div水平和垂直居中的更多相关文章

  1. css 水平、垂直居中

    水平居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素 块级元素:(div.p.h1...h6.ul.l ...

  2. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  3. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  4. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

  5. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  6. 让DIV中的内容水平和垂直居中

    让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...

  7. 【转】如何让DIV水平和垂直居中

    来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...

  8. 如何让DIV相对于body水平和垂直居中

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  9. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

随机推荐

  1. Qt中使用Windows API

    在Windows平台上进行开发,不可避免与Windows API打交道,Qt中使用的时候要添加对应API的头文件和链接lib文件,另外使用的Windows API的代码部分要使用#ifdef  Q_O ...

  2. Map三种遍历方式

    Map三种遍历方式 package decorator; import java.util.Collection; import java.util.HashMap; import java.util ...

  3. Oracle安装错误“程序异常终止

    Oracle安装错误"程序异常终止.发生内部错误.请将以下文件提供给oracle技术支持部   "程序异常终止.发生内部错误.请将以下文件提供给oracle技术支持部门:" ...

  4. Android 获取版本号

    啥也不是,直接看代码 public int getVersionCode(){ int versionCode = 0; try { PackageInfo packageInfo = getPack ...

  5. Android 子线程测试

    private volatile boolean mStopped = false; private int i; TextView tv1; TextView tv2; @Override prot ...

  6. session原理及实现共享

    一.session的本质http协议是无状态的,即你连续访问某个网页100次和访问1次对服务器来说是没有区别对待的,因为它记不住你.那么,在一些场合,确实需要服务器记住当前用户怎么办?比如用户登录邮箱 ...

  7. 《编写可维护的JavaScript》——JavaScript编码规范（四）

    注释 单行注释 单行注释以两个斜线开始,以行尾结束 单行注释有三种使用方法: 独占一行的注释,用来解释下一行代码.这行注释前总是有一个空行,且缩进层级和下一行代码保持一致. 在行尾的注释.代码结束到注 ...

  8. js爬虫心得

    第一步:分析要爬的网站:包括是否需要登陆.点击下一页的网址变化.下拉刷新的网址变化等等 第二步:根据第一步的分析,想好爬这个网站的思路 第三步:爬好所需的内容 保存 爬虫过程中用到的一些包: (1)c ...

  9. ping命令脚本实现显示网络状态、学生姓名、学号

    #!/bin/bash a=. ####定义一个固定变量 h=(wanghao xieyunshen 刘桃) ####定义数组 ..} ####for循环,后面的in是条件即从多少循环到多少 do # ...

  10. Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...