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

<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. 物理引擎-Physx的源代码去哪里找

    前几天无意中看到了Physx开源了,就连自己的领导也高兴了一下,让本道士去下载源代码琢磨一下,顺便做几个例子跑起来.结果没成想这个nvidia的github上的源代码被移除了,而且csdn,pudn上 ...

  2. PHP基础班初学感悟

    不知不觉差不多一个月就过去了 刚到培训班那时候的心情,现在也还能有所感觉 作为今年6月份的毕业生,刚从大学的实习期出来,辞掉了上一份工作,本来是打算找一份更加与专业挂钩的工作做的 也许是90后对网络的 ...

  3. 关于el jstl

    requestScope表示从request范围内取得.其他的还有sessionScope, pageScope和applicationScope,分别对应4种属性范围.而如果直接写${passwor ...

  4. Webview组件和HTML的介绍

    Deviceone平台并不是基于html5的跨平台开发工具.我们开发一个app都是使用原生的组件,但是在某些场景下html5也是非常好的选择,比如复杂的图文混排(类似新闻),比如报表chart之类用h ...

  5. Android 本地/网路下载图片实现放大缩小

     Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...

  6. easyui-window 关闭事件，只要关闭窗口就会触发

    $(function () {            $('#windowsMSG').window({                onBeforeClose: function () { //当 ...

  7. 2017年1月4日 星期三 --出埃及记 Exodus 21:30

    2017年1月4日 星期三 --出埃及记 Exodus 21:30 However, if payment is demanded of him, he may redeem his life by ...

  8. 华为5700s配置链路聚合

    /创建聚合链路,数值可以随意. port link-type trunk /设置成trunk模式.(如果是接入vlan的话,link-type acess) port trunk allow-pass ...

  9. JavaScript 跳坑指南

    JavaScript 跳坑指南 坑0-String replace string的replace方法我们经常用,替换string中的某些字符,语法像这样子 string.replace(subStr/ ...

  10. MySQL导入SQL文件及常用命令

      在MySQL Qurey   Brower中直接导入*.sql脚本,是不能一次执行多条sql命令的,在mysql中执行sql文件的命令: mysql> source   d:/myprogr ...