精华内容
下载资源
问答
  • 利用transform:translate使div居中显示 之前一直在用这个属性让某个div居中显示,但是一直有一个困惑,我想同时让水平和垂直都居中,可是水平方向总会有一点偏差,看一下以前怎么写的。 <!DOCTYPE html> <...

    利用transform:translate使div居中显示

    之前一直在用这个属性让某个div居中显示,但是一直有一个困惑,我想同时让水平和垂直都居中,可是水平方向总会有一点偏差,看一下以前怎么写的。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			div {
    				position: absolute;
    				top: 50%;
    				left: 50%;
    			
    				transform: translateX(-50%);
    				transform: translateY(-50%);
    				width: 300px;
    				height: 300px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    
    

    在这里插入图片描述
    可以看到,水平方向并没有居中,而是向右偏移了一点,今天一个偶然的机会知道我的问题出在哪里了。很简单的一个问题,但一直被忽视了。
    说一下为什么会出现那样的问题,是因为我分别写了两句话
    transform: translateX(-50%);
    transform: translateY(-50%);
    在css中写同名属性,后一个会覆盖掉前一个,所以transform: translateX(-50%);就不起作用了,也就是说你让div的left:50%之后,没有往回走div本身宽度的一半,所以就出现向右偏移了一段距离,这段距离的宽度就是div本身宽度的一半。

    看一下正确的代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			div {
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				transform: translate(-50%,-50%);
    				/* transform: translateX(-50%);
    				transform: translateY(-50%); */
    				width: 300px;
    				height: 300px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    
    

    在这里插入图片描述
    写成transform: translate(-50%,-50%);这样就不会有问题了,可以看到现在就正确了。

    展开全文
  • gt; CSS3,使用flexbox布局抛开兼容性,不需要考虑...div id="parent"&gt; &lt;div id="item"&gt;test&lt;/div&gt; &lt;/div&gt;#parent { display: flex; width

    参考文献 https://github.com/simaQ/cssfun/issues/3

    > CSS3,使用flexbox布局

    抛开兼容性,不需要考虑宽度和高度值。

    <div id="parent">
        <div id="item">test</div>
    </div>
    #parent {
        display: flex;
        width: 400px; /* 宽度值,随便啦 */
        height: 400px;  /* 高度值,随便啦 */
        background-color: yellow;
    }
    
    #item {
        width: 100px;/* 宽度值,随便啦 */
        height: 20px;/* 高度值,随便啦 */
        margin: auto;
        background-color: red; /* Magic! */
    }

    > 如何使用transform居中div? 

    https://jingyan.baidu.com/article/3ea51489b053e852e61bbaa1.html

    上下左右居中

    .center {

      left: 50%;

      top: 50%;

      transform: translate(-50%, -50%);

    }

    单独上下居中或左右居中

    上下

    .center {

        left: 50%;

        transform: translateX(-50%);

    }




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

            我以前看的一本书上是这么写的如果一个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)" ο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的文字垂直居中点击打开链接




    展开全文
  • 通过transform实现元素居中

    千次阅读 2019-07-28 10:19:31
    <!... <title>Title ... /* 使用transform实现元素居中,百分比参照元素本身的宽高 */ transform: translate(-50%,-50%); } <div class="box"> <div class="rec"></div> </div>  
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    	<style type="text/css">
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		.box{
    			width: 400px;
    			height: 400px;
    			border-radius: 200px;
    			background-color: #ccc;
    			margin: 100px auto;
    			position: relative;
    		}
    		.rec{
    			width: 200px;
    			height: 200px;
    			position: absolute;
    			background-color: red;
    			/* 定位的百分比参照父容器 */
    			left: 50%;
    			top: 50%;
    			/* 使用transform实现元素居中,百分比参照元素本身的宽高 */
    			transform: translate(-50%,-50%);
    		}
    	</style>
    </body>
    	<div class="box">
    		<div class="rec"></div>
    	</div>
    </html>

     

    展开全文
  • position和transform使元素居中的方法 (转载) 1. position &amp; transform: translate(-50%, -50%) 实现块元素百分比居中 css3: .parent { positioin: relative; } .child { positioin: absolute; top: 50%;...
  • html css怎样让div居中

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

    2021-03-18 17:43:33
    文章目录H5 div 居中显示推荐:[浏览器同步测试工具](http://www.browsersync.cn/#install)H5 引入外部CSS文件div居中显示块水平垂直居中子块水平垂直居中 推荐:浏览器同步测试工具 Browsersync能让浏览器实时、...
  • CSS样式——div居中方法

    万次阅读 多人点赞 2020-10-21 13:28:50
    1、绝对居中div设置样式,div默认显示位置为body的左上方。 width: 400px; height: 300px; background-color: orange; 如下图所示: 首先给div添加绝对定位,并设置上下左右边距为0,然后使用margin: auto;...
  • 三种让div居中的方式

    千次阅读 2019-09-11 13:31:37
    三种让div居中的方式 写在前面:div居中于屏幕中间有很多种方式,这里就记录下 学习的时候的三种方式 毕竟面试题问的多!! 1.宽度和高度已知的 <!DOCTYPE html> <html lang="en"> <head> <...
  • css div居中对齐Centering things is one of the most difficult aspects of CSS. 使事物居中是CSS最困难的方面之一。 The methods themselves usually aren't difficult to understand. Instead, it's more due to...
  • DIV居中五种展示方法

    千次阅读 2019-05-20 22:42:23
    DIV居中五种展示方法 展示注意点 1).此方法适用于固定宽高的元素; 2).这些属性要作用在居中的的元素本身; 3).绝对定位要注意父级定位; 4).这些属性方在局中元素的父级元素上; 5).块级元素设置两个参数(height与...
  • 其中这三个设置可以让Div居中; top: 50%; left: 50%; transform: translate( -50%, -50%); 不明白的是,左边和上边是50%, translate( -50%, -50%)之后,左边和上边不都应该是0和0了吗?为什么不是这样,...
  • 通过css3中的transform设置盒子居中
  • css使指定div居中

    2019-11-16 21:30:42
    绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ul.pagination { transform: translate(+150%,+30%); margin: auto; ...
  • div居中方法(共8种)

    千次阅读 多人点赞 2019-09-22 17:47:26
    水平居中 行级元素:为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <...
  • 让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了 <body> <div class="center"> ....
  • div居中

    2021-06-09 20:11:43
    HTML的div居中 一、margin:0px auto; 给需要居中的div设置一个宽度,然后设置元素的上下外边距为 相等 左右外边距为 auto,比如,margin:0px auto。 则可以实现 div 居中显示。 对于浮动元素,设置其左右外边距为...
  • transform的作用 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool) transform的兼容性 transform的兼容性还是比较乐观的。IE9以下不兼容,IE9支持代替的-...
  • 样式就可以让内容块居中。  CSS Code复制内容到剪贴板 .is-Transformed {  width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); ...
  • div居中之css水平居中 单行多行文本垂直居中
  • 让一个div居中的3种方式?

    千次阅读 2019-07-06 15:42:23
    1.相对定位: .father{ width:400px; height:400px; background:black; position: relative; left: 50%; margin-left:-200px; } 2.margin CSS 样式: ... transform: translate(-50%) }
  • ##《 在这我为大家总结了下在一个div使其子div居中的方式4种方式,希望可以帮助的大家,》有喜欢的小伙伴,和喜欢交流分享的小伙伴欢迎加我微信:15633050186 小姐姐有惊喜的哦!!! 1.弹性布局 html代码: <...
  • 如何在一个div中使其子div居中的5种方式

    万次阅读 多人点赞 2018-05-28 11:03:21
    transform: translate(-50%, -50%); padding: 1em; } 第三种 基于视口单位vh main{ margin: 50vh auto; transform: translateY(-50%); width: 18em; } 为什么不能以下代码来做那? margin: 50%...
  • 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"%> <...
  • div class="outer"> <div class="inner"></div> </div> CSS代码: .outer { width: 300px; height: 300px; margin: 60px auto; border: 1px solid #000; position: relative; } .inner ...
  • div垂直居中的两种方法 表格方法 display:flex; /* 第一种方法,DIV垂直居中 表格方法 */ display: table-cell; vertical-align:middle; /*DIV 垂直居中 第二种方法*/ display: flex; /*Flex是...
  • transform 垂直居中

    2018-06-06 14:47:00
    <div class="div-center">垂直居中元素块</div> </div> 由于要兼容各种浏览器,在使用此属性的时候最好加上浏览器前缀 效果图   转载于:...
  • divdiv底部居中

    万次阅读 2018-09-05 13:30:02
    position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%);  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,112
精华内容 8,044
关键字:

transform是div居中