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

<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. Server.MapPath和Request.PhysicalApplicationPath的异同

    很多人对它们都不陌生,在众多的WEB程序中,使用Server.MapPath和Request.PhysicalApplicationPath来操作目录/文件的几率参半,我曾经也经常混用,然而时间久了. ...

  2. 学习了quartz.net2.0的心得

    由于项目中要运用到此调度方法,所以抽空学习了下,简单的用法可以掌握了 首先作为没有用过的人来说,怎么用呢? 于是百度了下原来先要下载 quartz.net2.0, 然后我就去下了个quartz.net ...

  3. Scala基础语法

    /* 学慕课网上<Scala程序设计>课程跟着敲的代码 作为代码参考也是很好的 在scala_ide.org上下载eclipse IDE,新建一个worksheet,就可以像在xcode的 ...

  4. Linq创建带命名空间、前缀、Soap格式的XML

    关于XML,我也是刚接触,关于一般常见的XML,博客园.CSDN上的资料很多,对于不常见的带命名空间.前缀.Soap格式的XML的描述相对来说寥寥无几,上一篇我写到了对相对复杂的XML的读操作,下面说 ...

  5. UIApplication

    1.UIApplication 是 iPhone 应用程序的开始并且负责初始化并显示 UIWindow,并负责加载应用程序的第一个 UIView 到 UIWindow 窗体中. UIApplicati ...

  6. Java程序的编码规范

    所有的程序开发手册都包含了各种规则.一些习惯自由程序人员可能对这些规则很不适应,但是在多个开发人员共同写作的情况下,这些规则是必需的.这不仅仅是为了开发效率来考虑,而且也是为了后期维护考虑. 一.命名 ...

  7. spring mvc 后台只接收String类型，所以需要对日期类型处理

    一.只需要在方法中加入 @InitBinder protected void initBinder(WebDataBinder binder) { SimpleDateFormat dateForma ...

  8. 补发SQL。（实用语句！！）

    设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表 ...

  9. T检验与F检验的区别_f检验和t检验的关系

    1,T检验和F检验的由来 一般而言,为了确定从样本(sample)统计结果推论至总体时所犯错的概率,我们会利用统计学家所开发的一些统计方法,进行统计检定. 通过把所得到的统计检定值,与统计学家建立了一 ...

  10. Xcode及obj-c的基础知识

    1, 从简单的例程来看基本语法: 下面的代码是通过OSX-Application-Command Line Tool生成的: #import <Foundation/Foundation.h&g ...