css/css3实现未知宽高元素的垂直居中和水平居中
题目：
.a{
width: 200px;
height: 200px;
background-color: #ccc;
} <body>
<div class="a">
<div class="b">1111</div>
</div>
</body>
1、第一种 css3的transform
.a{
position: relative;
}
.b{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2、第二种 display的table-cell
.a{
display: table;
}
.b{
display: table-cell;
text-align: center;
vertical-align: middle;
}
3、第三种 flex盒子布局
.a{
display: flex;
justify-content: center;
align-items: center;
}
css/css3实现未知宽高元素的垂直居中和水平居中的更多相关文章
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- 未知宽高图片水平垂直居中在div
<BODY> <div class="box"> <span class="car"></span> <i ...
- 未知宽高div水平垂直居中的3种方法
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- canvas基础入门（一）canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- table-cell实现未知宽高图片，文本水平垂直居中在div
<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...
随机推荐
- java读取resource/通过文件名获取文件类型
java读取resource java读取resource目录下文件的方法: 借助Guava库的Resource类 Resources.getResource("test.txt" ...
- HTML字符实体（Character Entities），转义字符串（Escape Sequence） 转
为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...
- python3.4 使用BeautifulSoup问题
事情 记得昨儿还是什么时候,反正是以前,肯定安装过BeautifulSoup,只不过当初可能用的是python setup.py install,这是Python2的安装.然而用Python3运行Be ...
- 单独编译某个pas文件
默认的询问.提示.警告框都是英文,找到Vcl.consts.pas改了下,重新编译,放到安装目录下,替换原有的即可. 1. 使用dcc32.exe编译指定的pas文件,dcc32.exe所在目录见下图 ...
- test20190308
测试 晚上考试,是 \(SCOI\ 2016\ Day\ 2\) 的题目. 妖怪 由于之前在洛谷上用三分水过去了,就很 \(naive\) 地打了一个三分就跑了.获得 \(10\) 分好成绩. 记 \ ...
- test20190305
上午考试,是 \(SCOI\ 2016\ Day\ 1\) 的题目. 背单词 这题我以前是做过的.Trie树总结. #include<bits/stdc++.h> using namesp ...
- java面试题08
1.short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错? short s1 = 1; s1 = s1 + 1;编译时错误.对于shor ...
- {Notes}{LaTeX}{enumerate}
\usepackage{enumerate} \begin{enumerate}{(1)} \setcounter{enumi}{2} % begin with 2 \item first \item ...
- python 打印对象所有属性值
from pprint import pprint pprint (vars(your_object)) 另外查看所有属性名用.__dict__
- E519: Option not supported: fileencodings
怒转,来自http://blog.chinaunix.net/uid-10671107-id-2943841.html,感谢分享. vim中文乱码,原来是编译就除了问题,看来还不一定是不是坑爹的red ...