让一个小Div(子)在大Div(父)中垂直水平都居中

方法1:

.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;}

方法2:

.parent {            width:800px;            height:500px;            border:2px solid #000;            display:table-cell;            vertical-align:middle;            text-align: center;        }        .child {            width:200px;            height:200px;            display:inline-block;            background-color: red;        }

方法3:

.parent {            width:800px;            height:500px;            border:2px solid #000;            display:flex;            justify-content:center;            align-items:center;        }        .child {            width:200px;            height:200px;            background-color: red;        }

方法4:

.parent {            width:800px;            height:500px;            border:2px solid #000;            position:relative;        }        .child {            width:300px;            height:200px;            margin:auto;            position:absolute;/*设定水平和垂直偏移父元素的50%,再根据实际长度将子元素上左挪回一半大小*/            left:50%;            top:50%;            margin-left: -150px;            margin-top:-100px;            background-color: red;        }
时间: 2024-10-19 15:50:20

让一个小Div(子)在大Div(父)中垂直水平都居中的相关文章

图片与文字在div里实现垂直水平都居中

第一种方法,利用盒布局实现   <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; height:100px; background: yellowgreen; display:-moz-box; -moz-box-align:center; -moz-box-pack:center; } </style> <div class="div1"> <i

指定某个div随着指定大div滚动,而不是随着整个窗口固定不动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滚动事件</title> <script src="jquery-1.8.3.min.js"></script> <style> *{margin:0;padding:0;} .box{width:80%;

如何让一个DIV水平,垂直方向都居中于浏览器?

<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px 0 0 -200px;width:400px;height:300px;border:1px solid #008800;}--></style><div>让层垂直居中于浏览器窗口</div> 其实解决的思路是这样的:首们需要position:absolute;绝对

关于成员变量和局部变量的一个小问题,求大神指导下。

public class Test{ public static void main(String[] args){ int time=0; for(int i=2;i<100;i++){ //int time=0; for(int j=1;j<i;j++){ if(i%j==0){ time+=1; } } if(time==1){ System.out.print(i+"\t"); } } } 上面的代码是求100以内的素数,我发现"int time=0;&q

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

url: nmap是所有安全爱好者应该熟练掌握的扫描工具,本篇介绍其在扫描大网络空间时的用法. 为什么要扫描大网络空间呢? 有这样的情形: 内网渗透   攻击者单点突破,进入内网后,需进一步扩大成果,可以先扫描整个私有网络空间,发现哪些主机是有利用价值的,例如10.1.1.1/8, 172.16.1.1/12, 192.168.1.1/16 全网扫描 扫描一个巨大的网络空间,我们最关心的是效率问题,即时间成本. 在足够迅速的前提下,宁可牺牲掉一些准确性. 扫描的基本思路是高并发地ping: 1

实现图片在一个div中垂直左右都对齐

<div class="info_top_left"> <img src="images/img-product01.png" > </div> .info_top_left { height: 100px; width: 97px; line-height: 100px; border: 1px solid #CACACA; float: left; text-align: center; font-size: 0; } .in

小程序 - 子级页面返回父级,并把子级参数带回父级

(小的资深尚浅,不足的地方欢迎提bug,勿喷!!!) 说到页面之间的跳转,跳转中顺带些参数,在程序猿的生活中是很常用的,下面就让我们来看看吧! 这里有两种方法来解决: 方法一 就是我们常用的本地储存,在当前子级页面用( wx.setStorage  ||  wx.setStorageSync )储存好,跳转到父级页面的时候取出,采用( wx.getStorage  ||  wx.getStorageSync ),在这里,退出的时候一定要记得清除缓存哦!!!( wx.clearStorage  |

使用一个小图片tile平铺到ImageView中或Activity背景

方法两种: 首先必须在res/drawable目录下包含一个background.jpg 方法1:在res/drawable中创建一个xml文件(background_repeat.xml) 内容为 [html] view plaincopy <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/background" android:

生成一个长度为10的整数数组,数组中每个元素都不同(数组中值的范围为1~20)

public static void main(String[] args) { //方法一:利用for循环// int arr[]=new int[10];// for (int i = 0; i < arr.length; i++) {// arr[i]=r.nextInt(20)+1;// for (int j = 0; j < i; j++) {// if(arr[i]==arr[j]){// i--;// }// }// }// System.out.println(Arrays.t