css各居中大法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>居中大法</title>
<style>
.item {
width: 200px;
height: 200px;
float: left;
margin: 20px;
position: relative;
border: 1px solid black;
}
.item div{
width: 100px;
height: 100px;
background: red;
}
/*第一种
* good：兼容所有浏览器
* bad：必须知道元素具体宽高
*/
.div1{
position: relative;/*absolute也可*/
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/*第二种
* good：可以不知元素具体宽高，适合所有移动端
* bad：ie8以下不支持
*/
.div2{
position: absolute;/*fixed也可*/
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/*第三种
* good：可以对不确定高度的元素垂直居中，适合所有移动端
* bad：ie9以下不支持 当前容器必须知道具体高度
*/
.div3{
width: 200px;
height: 200px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.div3 img{
width: 100px;
height: 100px;
} /*第四种
* good：可以对不确定高度的元素垂直居中，适合所有移动端
* bad：ie9以下不支持 父元素加个display：table，实现类table
*/
.div4{
width: 200px;
height: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.item .inner-table{
width: 100%;
height: 100%;
display: table;
}
.div4 img{
width: 100px;
height: 100px;
} /*第五种
* good：文本水平垂直居中
* bad：只适用单行文本
*/
.item .div5{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;;
} /*第六种
* good：可以对多个元素元素垂直居中，适合所有移动端，可以未知宽高
* bad：ie9以下不支持
*/
.div6{
width: 200px;
height: 200px;
display: -webkit-box;/*弹性盒子模型*/
-webkit-box-pack: center;
-webkit-box-align: center;
}
.div6 img{
display: block;
width: 100px;
height: 100px;
}
/*第七种
* good：适合所有移动端,适用未知高度
* bad：ie9以下不支持
*/
.div7{
position: relative;/*absolute也可*/
left: 50%;
top: 50%;
-webkit-transform:translate(-50%,-50%); /* Safari 和 Chrome */
-moz-transform:translate(-50%,-50%); /* Firefox */
-ms-transform:translate(-50%,-50%); /* IE 9 */
-o-transform:translate(-50%,-50%);
}
/*第八种
* good：适合所有浏览器,适用未知高度
* bad：null
*/
.item .div8{
width: 100%;
height: 100%;
text-align: center;
}
.div8:before{
height: 100%;
display: inline-block;
vertical-align: middle;
background: blue;
content: '';
}
.center{
border: 1px solid blue;
display: inline-block;
vertical-align: middle;
line-height: 100px;
}
/*第九种
* good：可以对多个元素元素垂直居中，可以未知宽高
* bad：安卓的原生浏览器不支持，能够正常显示模块，文档流依次排列；UC浏览器不支持，显示为空白；微信浏览器不支持
*/
.item .div9{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.div9 img{
display: block;
width: 50px;
height: 60px;
}
</style>
</head>
<body>
<div class="item">
<div class="div1"></div>
</div>
<div class="item">
<div class="div2"></div>
</div>
<div class="item">
<a class="div3">
<img src="img/1.jpg" alt="img">
</a>
</div>
<div class="item">
<div class="div5">我要居中</div>
</div>
<div class="item">
<a class="div6">
我要居中<img src="img/1.jpg" alt="img">
</a>
</div>
<div class="item">
<div class="div7"></div>
</div>
<div class="item">
<div class="div8">
<div class="center">我要居中</div>
</div>
</div>
<div class="item">
<div class="div9">
<img src="img/1.jpg" alt="img">
<img src="img/1.jpg" alt="img">
</div>
</div>
</body>
</html>
各位前端伙伴肯定还有其他的水平垂直居中方式，欢迎回复讨论！！！
css各居中大法的更多相关文章
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- 使用Flexbox实现CSS竖向居中
竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...
- CSS标签居中
CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...
- css常用居中
对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- CSS中居中的完全指南（中英对照翻译）
翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
- ****CSS各种居中方法
水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...
- 【CSS】css各种居中方法
水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...
随机推荐
- 03-spring学习-自动装配
自动装配 新建person类: package com.spring.bean.autowire; public class Person { private String name; private ...
- mongodb - 查看集合的状态
#查看集合postalCodes的状态信息 > db.postalCodes.stats(1024) #1024表示显示的单位是KB.默认是bytes { "ns" : &q ...
- mysql导入慢
MySQL导出的SQL语句在导入时有可能会非常非常慢,经历过导入仅45万条记录,竟用了近3个小时.在导出时合理使用几个参数,可以大大加快导 入的速度. -e 使用包括几个VALUES列表的多行INSE ...
- pandas所占内存释放
df = pd.read_csv('....') 要调用循环处理多个文件时,内存占用情况严重,如果互相之间不需要调用,可以直接del df 释放内存
- 点滴积累【C#】---C#实现上传word将路径保存到数据库，文件保存到服务器。并且按照名称读取服务器的word
效果: 1. . . 数据库: 思路: 上传:先获取word物理地址,然后根据文件的类型判断,然后再保存到相应的文件夹下,再把路径插入到数据库中. 读取:首先根据输入的文件名字在数据库中查找出来文件的 ...
- Centos下源码安装git
1.centos下git版本太久了,才1.8几,而官方更新的还是很活跃的,于是我就想源码安装一个新版本. 2.首先到: https://github.com/git/git/releases 下载最新 ...
- Atitit.获取主板与bios序列号获取硬件设备信息 Wmi wmic 的作用
Atitit.获取主板与bios序列号获取硬件设备信息 Wmi wmic 的作用 1 获取硬件核心基础核心基础Wmi1 2 其他资料2 3 Wmic WMI 命令行接口2 4 Atitit.获取主板 ...
- 所需即所获：像 IDE 一样使用 vim
所需即所获:像 IDE 一样使用 vim 转载 yangyangwithgnu@yeah.net2015-11-08 10:05:53 谢谢 捐赠:支付宝 yangyangwithgnu@yeah.n ...
- [svc]alpha、beta、rc各版本区别
参考:http://www.ttlsa.com/linux/alpha-beta-rc/ 很多软件在正式发布前都会发布一些预览版或者测试版,一般都叫"beta版"或者 " ...
- [k8s]k8s api-server启动systemd参数分析
默认2个参数就可以启动(必需) kube-apiserver \ --service-cluster-ip-range=10.254.0.0/16 \ --etcd-servers=http://19 ...