已知宽高和未知宽高的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=& ...
随机推荐
- 微信小程序echart 折线图legend不显示的问题
最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:
- Django 框架 Form组件
一.Form组件简介 Form组件是django中一个非常强大的组件,在处理服务端和前端的交互上大大的提高了开发人员的开发速度. Form组件的功能: 用于处理前后端的数据认证(显示错误信息) 用于生 ...
- Py-numpy的随机函数【转载】
转自:https://blog.csdn.net/u012149181/article/details/78913167 1. numpy.random.rand() numpy.random.ran ...
- 多级代理 haproxy 传递X-Forwarded-Proto
有时候后端需要知道客户端是用的http请求还是https请求,所以一般在haproxy加上一个X-Forwarded-Proto头 http-request set-header X-Forwarde ...
- 【Redis】持久化
Redis提供了为持久化提供了两种方法:第一种是快照:他可以将存在某一时刻的所有数据都写入硬盘里面.第二种是只追加文件(AOF):它会在执行命令时,将被执行的写命令复制到硬盘里面. Redis支持持久 ...
- 4个项目带你学习ThinkPHP
ThinkPHP是一个快速.兼容而且简单的轻量级国产PHP开发框架,这里分享4个项目教程,带你掌握ThinkPHP,并能够在实践开发中应用. ThinkPHP框架实践 这个教程从ThinkPHP的入门 ...
- Dotfuscator 使用图解教程
Dotfuscator:是.NET混淆器和压缩器,它可以帮助您防止您的应用程序被反编译.同时,它还可以使得您的应用程序更加小巧以及高效.我用的是4.9版本的Dotfuscator,Dotfuscato ...
- export,import ,export default 彻底弄痛
ES6模块主要有两个功能:export和import 说白了就是一个淡出一个导入,就相当于以前的公共js样,哪个页面要用,就script 引入这个js ,然后 无耻的调用这个js中的方法了. ex ...
- js中call,caller,callee,aplly
1.函数的caller属性 (1).区分函数是在函数体调用还是顶层代码中调用:顶层中调用函数,该函数的caller属性返回null,在函数中调用,会返回调用发i函数的函数: <script> ...
- SQL中的replace函数
REPLACE 用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法 REPLACE ( 'string_expression1' , 'string_expression2 ...