已知宽高和未知宽高的div块的水平垂直居中
//已知宽高的情况
.div1_container{
border:1px solid #00ee00;
height:300px;
position:relative;
}
.div1_center{
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
//未知宽高的情况
.div2_container{
text-align:center;
height:400px;
border:1px solid #0000ed;
}
.div2_container:before{
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.div2_center{
display:inline-block;
vertical-align:center;
border:1px solid red;
}
已知宽高和未知宽高的div块的水平垂直居中的更多相关文章
- 先查出已知的 然后将未知的当做 having里面的条件
先查出已知的 然后将未知的当做 having里面的条件
- CSS子元素居中(父元素宽高已知,子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
- java基础 File与递归练习 使用文件过滤器筛选将指定文件夹下的小于200K的小文件获取并打印按层次打印(包括所有子文件夹的文件) 多层文件夹情况统计文件和文件夹的数量 统计已知类型的数量 未知类型的数量
package com.swift.kuozhan; import java.io.File; import java.io.FileFilter; /*使用文件过滤器筛选将指定文件夹下的小于200K ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- table-cell实现未知宽高图片,文本水平垂直居中在div
<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- css 水平垂直居中显示(定高不定高定宽不定宽)
position 元素已知宽度 <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
随机推荐
- python中的*arg和**kwargs
arg对应多出来的位置参数,把它们解析成tuple;kwargs把关键字参数解析成dict. def example(pram): print(pram) def example2(param, *a ...
- background-size的兼容性
做响应式布局的时候,如果有背景图,我们当然希望他能够全屏100%显示,这样显得页面非常的爆满,不过这又出现了一个问题,图片的尺寸多大合适呢,现在的浏览器分辨率参差不齐,对于Firefox等高级的浏览器 ...
- jode反编译软件
1.下载 http://jode.sourceforge.net/(官网) https://sourceforge.net/projects/jode/files/(下载地址) 2.使用 下载的jod ...
- (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
在linux环境下配置项目运行环境时,部署的人员都会分配一下内存,以保证程序正常的运行.其实在开发的时候(window系统),就已经涉及到内存分配了,只是这些参数有默认值,因此一直没有去重视它. 以M ...
- 算法bug修复
问题一: 160length:4length:4length:4length:4290length:2length:2160length:5length:5length:5length:5length ...
- vbox 相关
1.虚拟机vbox 安装mac os 10.12 图文教程: https://www.cnblogs.com/liming2017/p/7566953.html
- [LeetCode] 504. Base 7_Easy tag: Math
Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...
- js模拟队列----小优先队列
队列:先进先出,后进后出 var Queue = (function(){ var item = new WeakMap(); class Queue{ constructor(){ item.set ...
- Eclipse+GitHub 提交代码错误 -“rejected - non-fast-forward”
Eclipse Push出现rejected - non-fast-forward错误 在 Push到服务器时有时会出现 rejected - non-fast-forward 错误,这是由于远端发生 ...
- css3--之backface-visibility
使用CSS3 backface-visibility属性制作翻转动画效果: http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504151 ...