原文地址为:
css中absolute使用,用position和transform是div里面的div垂直居中
转载请注明本文地址: css中absolute使用,用position和transform是div里面的div垂直居中
我以前看的一本书上是这么写的如果一个div的position属性为absolute那么这个div不会受页面的其他元素影响,直接基于页面定位这是错误的。看w3c,用google查positon absolute ,别用百度翻译的不准。介绍网址点击打开链接
其中一句话
absolute | The element is positioned relative to its first positioned (not static) ancestor element |
一.解释absolute用法。
解释:这个元素的定位是相对于第一个postiion属性不是static的父类元素定义的
例子:页面
html代码:
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" value="hanghang"/>
<link type="text/css" rel="stylesheet" href="pc/customer/css/frame.css">
<script type="text/javascript" src="pc/customer/js/common.js"></script>
<title>爱家乐</title>
</head>
<body>
<div id="top">
<div id="topbody" style="margin: 0 auto">
<p class="left">
<span id="favorite">
<img src="pc/customer/image/favorite.png">
<a href="javascript:void(0)" οnclick="addFavorite()">收藏本站</a></span>
</p>
<p class="right" id="topRight">
<!--你好要改成人名-->
你好,欢迎光临本店!
<span id="loginInfo"><a href="">登录</a><small>|</small><a href="">免费注册</a></span>
<!--<span id="loginInfo"><a href="">退出</a><small>|</small><a href="">免费注册</a></span>-->
</p>
</div>
</div>
<div id="header">
<div id="headerLeft">
<div class="logoImage"></div>
<div class="logoFont">爱家乐</div>
</div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
</div>
<div id="nav">
</div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
关键css:
#header {
position: relative;
height: 80px;
}
#headerLeft {
border: solid 2px black;
float: left;
/*vertical-align: middle;*/
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: 10%;
height: 50%;
width: 10%;
}
.logoImage {
float: left;
border: solid 2px black;
position: relative; /*在float中必须relative*/
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 50%;
width: 20%;
}
其中id为leftHeader的div设置的position属性为absolute,top为50%这个是相对他的设有 position:relative父标签来定位的。
二.垂直居中:
设置
position: relative; /*在float中必须relative*/
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
就可以垂直居中了支持IE9以上解析
还有一种简单的方式里面的div的css的style为
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
兼容ie8
详细请看点击打开链接
相关div的文字垂直居中点击打开链接
转载请注明本文地址: css中absolute使用,用position和transform是div里面的div垂直居中