已知宽高和未知宽高的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=& ...
随机推荐
- linux相关介绍
1.linux的简介 (1)linux是一个开源.免费的操作系统,其稳定性.安全性.处理多并发(基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU) 的操作系统.linux是一个Unix类 ...
- PowerTCP FTP for .NET 在线e文文档
http://www.dart.com/help/ptftpnet/webframe.html
- Python开发【项目】:选课系统-改良版
程序名称: 选课系统 角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. ...
- (转)EOSIO开发(一)使用Docker构建本地环境
前言 一直想学习EOS开发,但是不知道怎么入门.最近从GitHub上下载了源码,发现官方已经提供了完整的EOSIO开发入门教程,既然如此赶紧开始行动.今天是系列文章的第一篇,介绍如何使用Docker搭 ...
- linux iscsi挂载与卸载
iscsiadm -m discovery -t sendtargets -p 192.168.4.245:3260 #扫描ISCSI Target 列出所有LUN iscsiadm -m node ...
- Java Selenium - 元素操作 (四)
四,弹出框 京东购物车为例 , 点击‘删除’ 或者‘移到我的关注’ ,就会弹出下面这个框框,练吧: (其实这也不是常规的弹出框,二是div css前端技术做的效果,本想做个Alert的案例,实在不好找 ...
- jmeter 二次开发
基于jmeter的java请求的二次开发 常用的方法: ①.addArgument("name", "value") 定义参数 ②.sampleStart ...
- 分享一种系统事故&问题处理反馈方式(COE)
标签: COE, 复盘 如下为2014/11月份的邮件. 丁总,如下为摇钱树标的交易订单号重复事故的发生及处理过程.COE(Correction Of Error)是我们在JD研发部时使用的一种事故& ...
- 实验:记录一则删除GI的过程
环境: RHEL 6.5 + Oracle GI 11.2.0.4 (2 nodes) 参考MOS文档 How to Deconfigure/Reconfigure(Rebuild OCR) or D ...
- react native 中使用swiper
1.下载依赖 cnpm install react-native-swiper --save 2.在组件中使用 import React, { Component } from 'react'; im ...