小的div在大的div中垂直居中
方法一:
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中垂直居中的更多相关文章
- 让一个小的div在大的div中居中显示
原文 实现原理是设置margin自动适应,然后设置定位的上下左右都为0. 就如四边均衡受力从而实现盒子的居中: 代码: .parent { width:800px; height:500px; bor ...
- nmap小技巧[1] 探测大网络空间中的存活主机
url: nmap是所有安全爱好者应该熟练掌握的扫描工具,本篇介绍其在扫描大网络空间时的用法. 为什么要扫描大网络空间呢? 有这样的情形: 内网渗透 攻击者单点突破,进入内网后,需进一步扩大成果, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 尺寸不固定的图片在div中垂直居中并完全显示
前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- 一个div在另一个div中水平垂直的方法
html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...
- div盒子水平居垂直中的几种方法
div盒子水平居垂直中的几种方法<!DOCTYPE html><html> <head> <mete charset="ut ...
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
随机推荐
- Android -- 获取网络数据并将数据存到本地数据库中
public static final int downloadDone = 1; // 用户model数组 ArrayList<Loginer> loginers = new Array ...
- css 固定HTML表格的宽度
在网页中插件表格时,就算你有时定义了宽度,默认的也会根据里面内容的来自动拉伸.有时候自动拉伸是好,但是如果你表格里面的内容太长,表格就会拉伸的特别难看. 像下面的表格,正常的显示应该如下: 但是如果里 ...
- iOS代码规范
一.文档结构管理 1.建立Libraries文件夹,所有第三方库放入其中. 2.建立Utilities文件夹,自已封装的类放入其中. 3.建立Constants.h头文件,所有的常量定义于其中.Con ...
- pdo in 查询
$ids1 = implode(",",$upload_ids);if(!empty($upload_ids)){ $ids_db= pdo_fetchall('select id ...
- initialization & finalization
Delphi 的pas文件中可以有initialization和finalization两个关键字, 1.initialization关键字: 在initialization关键字到finalizat ...
- Angularjs兼容IE
http://www.tuicool.com/articles/EJv6riY http://www.angularjs.cn/A00v http://www.cnblogs.com/ahl5esof ...
- Fedora中显示windows下的文件
目录 一些预备知识: 在中国windows的编码是本地编码 , 即GBK,GB2312,GB18030等 GBK 也就是windows-986 Windows现在只支持Unicode (UTF-16 ...
- 微软压力测试工具 web application stress
转自 http://www.cnblogs.com/tonykan/p/3514749.html lbimba 铜牌会员 这里给广大的煤油推荐一个web网站压力测试工具.它可以用来模拟多个用户操作网 ...
- linux查看MySQL版本的四种方法
1 在终端下执行 mysql -V 2 在help中查找 mysql --help |grep Distrib 3 在mysql 里查看 select version() 4 在mysql 里查看 s ...
- R语言——绘制半圆形图
好久没发点新的作品了.......也许...... Que sera, seraWhatever will be, will be