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

来源：互联网发布：狗听得懂人话吗知乎编辑：程序博客网时间：2024/04/29 20:21

我以前看的一本书上是这么写的如果一个div的position属性为absolute那么这个div不会受页面的其他元素影响，直接基于页面定位这是错误的。看w3c，用google查positon absolute ,别用百度翻译的不准。介绍网址点击打开链接

其中一句话absoluteThe 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的文字垂直居中点击打开链接

0 0