css无定宽水平居中
2024-10-16 00:42:13
转载: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>
最新文章
- git 常用操作命令
- MySQL新建用户,授权,删除用户,修改密码
- 构建spring+mybatis+redis架构时遇到的小异常
- perl 引用(一)
- POJ - 1245 Programmer, Rank Thyself
- 使用ssh-keygen设置ssh无密码登录
- 读取XML
- w3c 学习html DOM
- 201521123033《Java程序设计》第2周学习总结
- 开源API集成测试工具 Hitchhiker v0.1.3 - 参数化请求
- JavaScript八张思维导图—Date用法
- 【Thymeleaf】常用属性
- Spring4之IOC
- 3)django-路由系统url
- centos7+nginx+rtmp+ffmpeg搭建流媒体服务器(保存流目录与http目录不要随意配置,否则有权限问题)
- GIT 管理修改、删除文件
- RMAN备份策略与异机恢复一例(续篇)
- json添加数据
- Win7_Ultimate + VS2010 + openGL_MFC单文档应用开发框架搭建步骤
- Hibernate查询_HQL_EJBQL_QBC_QBE