方法一:

1、代码:

 <div style="width:200px;height:200px;border:solid blue;position:relative;">
<div style="width:100px;height:100px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: red;"></div>
</div>

2、效果图:

方法二:

1、代码:

 <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;">
<div style="width:100px;height:100px;display:inline-block;background-color: red;"></div>
</div>

2、效果图:

方法三:

1、代码:

 <div style="width:200px;height:200px; border:2px solid #000;display:flex;justify-content:center;align-items:center;">
<div style="width:100px;height:100px;background-color: red;"></div>
</div>

2、效果图:

方法四:

1、代码:

 <div style="width:200px;height:200px; border:2px solid #000;position:relative;">
<div style="width:100px;height:100px;margin:auto;position:absolute;left:50%;top:50%;margin-left: -50px;margin-top:-50px;background-color: red;"></div>
</div>

2、效果图:

小的div在大的div中垂直居中的更多相关文章

  1. 让一个小的div在大的div中居中显示

    原文 实现原理是设置margin自动适应,然后设置定位的上下左右都为0. 就如四边均衡受力从而实现盒子的居中: 代码: .parent { width:800px; height:500px; bor ...

  2. nmap小技巧[1] 探测大网络空间中的存活主机

    url: nmap是所有安全爱好者应该熟练掌握的扫描工具,本篇介绍其在扫描大网络空间时的用法. 为什么要扫描大网络空间呢? 有这样的情形: 内网渗透   攻击者单点突破,进入内网后,需进一步扩大成果, ...

  3. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  6. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  7. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  8. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  9. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

随机推荐

  1. Android -- 获取网络数据并将数据存到本地数据库中

    public static final int downloadDone = 1; // 用户model数组 ArrayList<Loginer> loginers = new Array ...

  2. css 固定HTML表格的宽度

    在网页中插件表格时,就算你有时定义了宽度,默认的也会根据里面内容的来自动拉伸.有时候自动拉伸是好,但是如果你表格里面的内容太长,表格就会拉伸的特别难看. 像下面的表格,正常的显示应该如下: 但是如果里 ...

  3. iOS代码规范

    一.文档结构管理 1.建立Libraries文件夹,所有第三方库放入其中. 2.建立Utilities文件夹,自已封装的类放入其中. 3.建立Constants.h头文件,所有的常量定义于其中.Con ...

  4. pdo in 查询

    $ids1 = implode(",",$upload_ids);if(!empty($upload_ids)){ $ids_db= pdo_fetchall('select id ...

  5. initialization & finalization

    Delphi 的pas文件中可以有initialization和finalization两个关键字, 1.initialization关键字: 在initialization关键字到finalizat ...

  6. Angularjs兼容IE

    http://www.tuicool.com/articles/EJv6riY http://www.angularjs.cn/A00v http://www.cnblogs.com/ahl5esof ...

  7. Fedora中显示windows下的文件

    目录 一些预备知识: 在中国windows的编码是本地编码 , 即GBK,GB2312,GB18030等 GBK  也就是windows-986 Windows现在只支持Unicode (UTF-16 ...

  8. 微软压力测试工具 web application stress

    转自 http://www.cnblogs.com/tonykan/p/3514749.html lbimba  铜牌会员 这里给广大的煤油推荐一个web网站压力测试工具.它可以用来模拟多个用户操作网 ...

  9. linux查看MySQL版本的四种方法

    1 在终端下执行 mysql -V 2 在help中查找 mysql --help |grep Distrib 3 在mysql 里查看 select version() 4 在mysql 里查看 s ...

  10. R语言——绘制半圆形图

    好久没发点新的作品了.......也许...... Que sera, seraWhatever will be, will be