CSS垂直水平居中方法整理
CSS定位中常常用到垂直居中,比如覆盖层上的弹框。
兼容性比较好的方法:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<style type="text/css">
#box
{
width:200px;
height:100px;
text-align:center;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */
background-color:#ffff99;
}
</style>
</head>
<body>
<div id="box">Hello World!</div>
</body>
</html>
这个方法只适用于已知宽高的块,因为要设置负边距来修正。
如果是未知尺寸的块,可以使用以下方法:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<style type="text/css">
#box
{
width:200px;
height:100px;
text-align:center;
position: absolute;
left: 0;
top: 0;
right:0;
bottom:0;
margin:auto;
background-color:#ffff99;
}
</style>
</head>
<body>
<div id="box">Hello World!</div>
</body>
</html>
原因是,绝对定位的布局取决于三个因素,一个是元素的位置,一个是元素的尺寸,一个是元素的margin值。没有设置尺寸和 margin 的元素会自适应剩余空间,位置固定则分配尺寸,尺寸固定边会分配 margin,都是自适应的。
IE7- 的渲染方式不同,渲染规则也不一样,他不会让定位元素去自适应。
现在有了CSS3,就又有新招数了:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<style type="text/css">
#box
{
width:200px;
height:100px;
text-align:center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color:#ffff99;
}
</style>
</head>
<body>
<div id="box">Hello World!</div>
</body>
</html>
就是使用transform
代替margin
. transform
中translate
偏移的百分比值是相对于自身大小的,和第一个方法思路类似。
也可以使用FlexBox实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Centering an Element on the Page</title>
<style type="text/css">
html {
height: 100%;
} body {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ /*垂直居中*/
/*老版本语法*/
-webkit-box-align: center;
-moz-box-align: center;
/*混合版本语法*/
-ms-flex-align: center;
/*新版本语法*/
-webkit-align-items: center;
align-items: center; /*水平居中*/
/*老版本语法*/
-webkit-box-pack: center;
-moz-box-pack: center;
/*混合版本语法*/
-ms-flex-pack: center;
/*新版本语法*/
-webkit-justify-content: center;
justify-content: center; margin: 0;
height: 100%;
width: 100% /* needed for Firefox */
}
/*实现文本垂直居中*/
h1 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; -webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 10rem;
} </style>
</head>
<body>
<h1>OMG, I’m centered</h1>
</body>
</html>
CSS垂直水平居中方法整理的更多相关文章
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
- (转载)css垂直水平居中的整理
方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- css 垂直+水平居中
垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...
- CSS之垂直水平居中方法
//居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...
- CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
- css 垂直水平居中总结
一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...
- css垂直水平居中方案
1. 水平居中 如果是inline元素:在父元素上面设置text-align:center; 如果是block元素:设置宽度和margin:0 auto; 如果是多块级元素:在父元素上面设置text- ...
- CSS垂直水平居中
小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...
随机推荐
- 通过共享用户ID来实现多个应用程序使用同一个进程(一些情况的测试)
从很多方面来看,每个Android 应用程序都存在于它自己的世界之中:• 默认情况下,每个应用程序均运行于它自己的Linux 进程中.当应用程序中的任意代码开始执行时,Android 启动一个进程,而 ...
- jquery.cookie.js存与取以及过期时间设置
$(function(){ $(".active_out .abtn").click(function(){ $(this).parents(".active_out&q ...
- [CSS]当选择器没有指定元素时
当选择器没有指定元素时,样式会作用于(匹配)所有html元素. 如下面代码: <!DOCTYPE html> <html> <head> <style> ...
- storm概念学习及流处理与批处理的区别
在过去10 年中,随着互联网应用的高速发展,企业积累的数据量越来越大,越来越多.随着Google MapReduce.Hadoop 等相关技术的出现,处理大规模数据变得简单起来,但是这些数据处理技术都 ...
- spark transformation与action操作函数
一.Transformation map(func) 返回一个新的分布式数据集,由每个原元素经过函数处理后的新元素组成 filter(func) 返回一个新的数据集,经过fun函数处理后返回值为tru ...
- RabbitMQ介绍1 - 由来
RabbitMQ是一个异步消息通信中间件,用erlang语言开发,实现了AMQP(Advanced Message Queue )协议,是一个开源产品,官方网站:http://www.rabbitmq ...
- ylbtech-dbs:ylbtech-2,PAM(个人资产管理系统)
ylbtech-dbs:ylbtech-2,PAM(个人资产管理系统) -- =============================================-- Personal Asse ...
- cmd 登录oracle
源地址:http://zhidao.baidu.com/link?url=mehN7bFY14DGH6DwhpbJnAbzb_fI3WbQn2-WqVInyyqHkfYlZSfu7GQVjQgQoPV ...
- [Flex] Accordion系列 - Header图标的设置
<?xml version="1.0" encoding="utf-8"?> <!--Flex中如何通过getHeaderAt()函数以及se ...
- windows 修改hosts
2222.111.1.1 ip 格式要正确,否则硬解会失败. 220.11.1.1