css无定宽水平居中
转载:http://www.cnblogs.com/jogen/p/5213566.html 这个博客的菜单ui还是棒棒的。
方法一
思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中
优点:父元素(parent)可以动态的改变高度(table元素的特性)
缺点:IE8以下不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style> .parent1{
display: table;
height:300px;
width: 300px;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
} </style>
<body>
<div class="parent1">
<div class="child">hello world-1</div>
</div>
</body>
</html>
方法二:
思路:使用一个空标签span设置他的vertical-align基准线为中间,并且让他为inline-block,宽度为0
缺点:多了一个没用的空标签,display:inline-blockIE 6 7是不支持的(添加上:_zoom1;*display:inline)。
当然也可以使用伪元素来代替span标签,不过IE支持也不好,但这是后话了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent2{
height:300px;
width: 300px;
text-align: center;
background: #FD0C70;
}
.parent2 span{
display: inline-block;;
width: 0;
height: 100%;
vertical-align: middle;
zoom: 1;/*BFC*/
*display: inline;
}
.parent2 .child{
display: inline-block;
color: #fff;
zoom: 1;/*BFC*/
*display: inline;
} </style>
<body>
<div class="parent1">
<div class="child">hello world-1</div>
</div> <div class="parent2">
<span></span>
<div class="child">hello world-2</div>
</div>
</body>
</html>
方法三
思路:子元素绝对定位,距离顶部 50%,左边50%,然后使用css3 transform:translate(-50%; -50%)
优点:高大上,可以在webkit内核的浏览器中使用
缺点:不支持IE9以下不支持transform属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >未知宽高元素水平垂直居中</ title > </ head > < style > .parent3{ position: relative; height:300px; width: 300px; background: #FD0C70; } .parent3 .child{ position: absolute; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%); } </ style > < body > < div class="parent3"> < div class="child">hello world-3</ div > </ div > </ body > </ html > |
方法四:
思路:使用css3 flex布局
优点:简单 快捷
缺点:兼容不好吧,详情见:http://caniuse.com/#search=flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
background: #FD0C70;
}
.parent4 .child{
color:#fff;
}
</style>
<body>div> <div class="parent4">
<div class="child">hello world-4</div>
</div>
</body>
</html>
css无定宽水平居中的更多相关文章
- CSS基础布局--居中对齐,左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
- CSS布局 -- 左右定宽,中间自适应
左右定宽,中间自适应 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left margin-right 查看 demo <!DOCTYPE h ...
- CSS布局 -- 左侧定宽,右侧自适应
左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- css实现三栏布局,两边定宽,中间自适应
1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...
- css布局:定宽,自适应
css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...
- css高度已知,左右定宽,中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 如何用CSS实现中间自适应,两边定宽三栏布局
1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...
随机推荐
- c#简单案例--单位转换器
经过几天学习,写出了一个简单的winform应用程序,贴出源码,以备不时之需. 软件启动后的界面如下图所示: 如图,该程序由6个label.8个comboBox.8个textBox和4个button组 ...
- openstack components internal relations
1. 各个组件之间可以互相调用(都是common sense) conductor 负责DB的操作. 各个组件之间通过RPC, 序列化通过oslo_versionedobjects. 2. 具体调用 ...
- OO课程第四次总结
终于来到了最后一次的OO作业,以博客作业的形式来终结也是极好的,回顾一下过去十六周自己的经历,感慨颇深. 测试和正确性论证 简单来说,测试的目的是将程序的代码做到全覆盖,从而确保每个分支都运行一遍,进 ...
- Mac10.13 telnet不能用的解决方法
telnet在Mac 10.13上不能用了 Restore的方法 brew install inetutils To be clear, brew install inetutils will ins ...
- How to use Junit Listener
JUnit Listeners If you want to do some operations when your tests are started, passed, finished, fai ...
- Oracle为表或字段添加备注
comment on column TableName.ColumnName is ‘备注名’; comment on table TableName is '备注名';
- 简单明了的掌握diff命令? 参考: http://www.ruanyifeng.com/blog/2012/08/how_to_read_diff.html
diff是比较两个 文本文件, 或目录,(中名字相同的文件) diff 是按行来比较的, 只要两个对应的行, 不完全一致, 就报告为不同, 否则就视为相同. (一行中任意一点的不同...) 检查时, ...
- Kubernetes(k8s)入门、单机版安装、kuberctl指令、k8s服务实例
1.切换root .关闭centos自带的防火墙 # systemctl disable firewalld # systemctl stop firewalld .安装etcd和kubernetes ...
- (转)WebSocket学习
石墨文档:https://shimo.im/docs/3UkyOPJvmj4f9EAP/ (二期)17.即时通讯技术websocket [课程17]java We...实现.xmind0.1MB [课 ...
- 《剑指Offer 1.二维数组中的查找》2019-03-25
剑指Offer 第一题 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数 ...