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)" onclick="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垂直居中

css中absolute使用，用position和transform是div里面的div垂直居中

猜你喜欢