精华内容
下载资源
问答
  • 我以前看的一本书上这么写的如果一个div的position属性为absolute那么这个div不会受页面的其他元素影响,直接基于页面定位这错误的。看w3c,用google查p
    原文地址为: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垂直居中
    展开全文
  • [css] 怎样把一个div居中?怎样把一个浮动元素居中?怎样把绝对定位的div居中? 主要用到: text-alin: center; margin: 0 auto; position: relative | absolute; left: 50%; vertical-align: middle; ...

    [css] 怎样把一个div居中?怎样把一个浮动元素居中?怎样把绝对定位的div居中?

    主要用到:
    
        text-alin: center;
        margin: 0 auto;
        position: relative | absolute; left: 50%;
        vertical-align: middle;
        transform: translate(-50%);
    
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • html css怎样让div居中

    千次阅读 2019-08-16 14:28:45
    用css3的transform属性即可让div居中 如代码所示 先设置子元素的margin-top和margin-left为50% 接着用transform的translate来移动子元素为-50% translate相对的元素本身进行移动,这样移动-50%(元素宽度的一半)...

    很多时候我们都需要div居中
    用css3的transform属性即可让div居中
    如代码所示

    先设置子元素的margin-top和margin-left为50%
    接着用transform的translate来移动子元素为-50%
    translate相对的是元素本身进行移动,这样移动-50%(元素宽度的一半)即可居中了
    不过因为新特性,所以兼容性不好,如果考虑IE的话,慎重使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #parent{
                width: 500px;
                height: 500px;
                background: deepskyblue;
                border: 1px solid red;
            }
            #child{
                width: 300px;
                height: 300px;
                background: deeppink;
                margin-left: 50%;
                margin-top: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child">child</div>
        </div>
    </body>
    </html>


     

    展开全文
  • div居中

    2018-04-04 15:02:44
    div 居中在工作中经常用到 居中的方法也有很多总结2种自己最常用的方法(均不需要知道盒子的宽高)1 父盒子设置relative 子盒子设置 position: absolute; top: 50%; right: 50%; transform: translate(-50%,-50%)...

    div 居中在工作中经常用到 居中的方法也有很多总结2种自己最常用的方法(均是不需要知道盒子的宽高)

    1 父盒子设置relative 子盒子设置

      position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%,-50%);
    改方法的缺点是不兼容版本的IE 在移动端使用时当父盒子的距离不是偶数时移动的距离不成整数 此时字体会模糊

    2 使用css3的flex布局  用在移动端

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>css实现居中</title>
    	<style>
    		.father-box{
    			width: 300px;
    			height: 300px;
    			background-color: red;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    		}
    	</style>
    </head>
    <body>
    	<div class="father-box">
    		<div>
    			
    			我就是垂直的内容
    		</div>
    
    	</div>
    </body>
    </html>

    display: flex;

    justify-content: center;

    align-items: center;

    就可以实现

    展开全文
  • 让left和top都50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了 <body> <div class="center"> ....
  • transform的兼容性 transform的兼容性还是比较乐观的。IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换。 谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋兼容的。 ...
  • 掘金:Micherwa 的个人主页 - 专栏 - 掘金垂直居中,在 CSS 中一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 ...
  • css设置div垂直居中

    千次阅读 2019-07-16 15:36:08
    一开始想着直接对div用margin-top:50%就行了,但不知道为...这里介绍的方法使用top和transform来实现div的一个居中。 html文件 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <...
  • 大家都知道,不管在平常布局中还是在面试当中都会遇到让一个盒子水平且垂直居中的情况,在这里总结了几种常用的居中方法:1、绝对定位居中(最常用、好用) 2、负margin居中(传统方法) 3、margin固定宽高居中 4...
  • <style> .col-center-block { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> 转载...
  • 大家都知道,不管在平常布局中还是在面试当中都会遇到让一个盒子水平且垂直居中的情况,在这里总结了几种常用的居中方法: 1、绝对定位居中(最常用、好用) 2、负margin居中(传统方法) 3、margin固定宽高居中...
  • div在父div里底部居中

    千次阅读 2019-05-19 17:48:41
    div: position relative 子div: position absolute bottom 0 left 50% ...ps:我在其他博客看到很多人的写法 transform: translate(-50%, -50%); 这个在我这里不行,改成transform: tr...
  • div元素居中时使用translate的坑 一个小坑: 在之前用css写块级元素的居中的时候,我经常使用的写法下面这种写法 position:absolute; left:50%; top: 50%; transform: translate(-50%,-50%); 这也常见的方法之...
  • 您可以尝试改变浏览器大小,这个元素依然水平垂直居中的哦!</div> .center{  position: absolute;  top: 50%;  left: 50%;  width:50%;  height:30%;  padding:20px;  text-align:center; ...
  • 利用绝对定位和相对定位的功能灵活布置div的位置,并用transform作最后的微调。代码及注释: <!DOCTYPE html> <html> <head> <title> div </title> <style type="text/css...
  • 采用absolute绝对布局,让left和top都50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,便可达到水平+垂直居中效果 .center { ...
  • 大家都知道,不管在平常布局中还是在面试当中都会遇到让一个盒子水平且垂直居中的情况,在这里总结了几种常用的居中方法:1、绝对定位居中(最常用、好用) 2、负margin居中(传统方法) 3、margin固定宽高居中 4...
  • div盒子垂直居中

    2021-01-08 14:35:18
    比较推荐的办法: 1.display:flex。...2.定位+transform 定位中心点盒子的左上顶点,所以定位之后我们需要回退盒子一半的距离。 .parent{ position:relative; } .child{ position:absolute; top
  • 思路:在盒子里边内容上面包裹一层span标签,对内层的span进行逆向旋转(前提在外层对内容进行居中显示,否则旋转基点不在外层盒子中心的话,将会导致内容不居中) 部分代码参考如下: &lt;div class="...
  • 关于让div元素垂直居中的几种方法

    千次阅读 2018-09-17 16:29:08
    本人一个前端新手,如何让两个相互嵌套的div,让里面的div居中是一个比较简单的问题,面试也常问,我就从其他博客中提取稍微总结一下(转载侵删),也加了一点自己的困惑和理解,错误的地方希望能有人指出: ...
  • 若当前div的宽高未知,可使用transform: translate(-50%, -50%)。给父级元素使用相对定位,当前元素使用绝对定位,left,top均为50%,那么子元素的中心点就会在父级元素的中心,再将子元素偏移自身宽高的一半,即可...
  • “自适应大小”的div居中处理”

    千次阅读 2017-11-06 16:46:26
    html<div class="tipWords"></div>cssposition:fixed; top: 70%; left: 50%;...ps:这里左右居中,上下居中的话,把top也改成50%即可。这定位的,不是定位的可以把left和top改成margin值就可以了。
  • 文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用。 一、盒子没有固定的宽和高 方案1、Transforms 变形 这最简单的方法,不仅能实现绝对居中同样的效果...
  • 我不知道我的宽度和高多少,我要实现水平垂直居中。 </div> 一、盒子没有固定的宽和高1. Transforms 变形 这最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 139
精华内容 55
关键字:

transform是div居中