利用translate元素移动控制元素居中

最新推荐文章于 2023-02-16 19:57:46 发布
最新推荐文章于 2023-02-16 19:57:46 发布
阅读量266 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gunsmoke/article/details/104538031
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        article {
            border: solid 2px black;
            box-sizing: border-box;
            width: 400px;
            height: 400px;
            position: relative;
        }
        div {
            height: 200px;
            width: 200px;
            border: solid 2px yellowgreen;
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
     <article>
         <div></div>
     </article>
</body>
</html>

刚开始没有设置元素移动时，执行left:50%;top:50%;后元素的左上角会向右和下分别移动父article的宽和高的一半，然后执行transform: translate(-50%,-50%);此时元素在分别向左和向上移动自己宽度和高度的一半，这样正好就居中的，之前做项目时看到别人这么搞过，今天明白为什么了。

gunsmoke
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML对于元素水平垂直居中的探讨
09-28
同样使用绝对定位，但通过JavaScript或jQuery动态计算元素的宽度和高度，然后设置`margin-left`和`margin-top`，使得元素居中。这种方法的优点在于适应性更强，尤其是当元素尺寸变化时。例如： ```javascript $...
DIV以及图片水平垂直居中兼容多种浏览器
09-22
这里的`translate(-50%, -50%)`将元素相对于其自身尺寸的中心点移动，从而达到精确的居中效果。这种方法对于现代浏览器和较旧的IE9+浏览器都是兼容的。 总结起来，实现元素的水平垂直居中有多种策略，可以根据项目...
translate 实现元素垂直居中
weixin_30454481的博客
04-02 68
<div class="demo2"> <span>about me</span> </div> css .demo2{ width: 200px; height: 200px; border:1px solid ...
css——利用translate让元素居中
叶落无痕的博客
05-17 317
参考：https://blog.csdn.net/qq_20264891/article/details/87873311 父元素： position: relative; 居中元素： position: absolute; top: 50%; //基于父元素 left: 50%; //基于父元素 transform: translate(-50%, -50%); //基于自身 注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性...
元素水平垂直居中【弹性布局 || Translate】
HTMl5自由者
06-20 2084
/** * 游戏排行版 */ .yblist { position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.9; z-index: 999; }/*弹性布局方法*/ .flex { display:-webkit-box; d
元素的移动（translate）
Mc维嘉的博客
02-16 2439
                               元素的移动（translate）  translate（）函数可以将元素向指定的方向移动，就像position中的relative.   translate()分为三种情况:   translate(x,y)水平方向和竖直方向同时移动（也就是X轴方向与Y轴方向同时移动）   translate（x）仅水平方向移动   tr...
CSS3中使用translate() 方法实现元素位置的移动
weixin_39037804的博客
09-20 3971
translate() 方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数： 实例 div { transfor...
layer弹出层自适应高度,垂直水平居中的实现
10-16
这里，`top: 50%` 和 `left: 50%` 将元素的左上角定位在窗口的中心，然后 `transform: translate(-50%, -50%)` 会将元素自身向左和向上移动一半的距离，使其整体居中。`width` 和 `height` 可以根据需要设置为固定值...
html+jq+css 自适应屏幕居中
04-12
- `top: 50%` 和 `left: 50%`: 将元素的左上角移动到窗口中心。 - `transform: translate(-50%, -50%)`: 调整元素自身的位置，使其实际中心与窗口中心对齐。 4. **居中策略**: - 使用Flexbox，设置`display: ...
淡入淡出的居中弹窗代码.rar
07-16
在JavaScript中，我们可以利用DOM操作来创建和控制弹窗元素，通过CSS来定义其样式和位置。首先，我们需要在HTML中创建弹窗的基础结构，可能包括一个容器元素以及弹窗内容。然后，通过JavaScript获取这个元素，并设置...
CSS3：2D转换之translate移动及盒子垂直水平居中
qq_54517101的博客
08-12 242
表示x方向移动1000px,y方向移动100px。
用translate让盒子居中
google_SEO_yang的博客
01-16 308
<style> div{ position: relative; width: 500px; height: 500px; background-color: pink; } p{ position: absolute; top: 50%; left: 50%.
使用定位配合translate实现盒子居中显示
DJCBPL的专栏
02-24 254
使用定位配合translate实现盒子居中显示，居中对盒子内部元素没有任何影响
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1755
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
浮动元素居中的三种方法
weixin_59269336的博客
09-15 1万+
文章目录浮动元素居中的三种方法方法一方法二方法三总结 浮动元素居中的三种方法 方法一 知识点： 浮动 样式： .left{ floa: left; width: 100px; background-color: yellow; } .content{ width: 100px; margin: 0 auto; } <div class="content"> <div class="left">left</div> </div>
利用translate()进行水平垂直居中
热门推荐
mr_fzz的博客
11-08 2万+
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中. 代码如下://html: <div class='wrap'> 我不知道宽高，但是我就是要水平垂直居中 </div>//css .wrap{ padding:10px; background:green; color:#fff; position:abso
unity中控制移动的几个方法
qq_40666620的博客
03-06 1385
1.transform方式 直接改变position：这种方式不会考虑collider的碰撞，但是好像在最新的版本中也会考虑到，行不行自己可以实验，方式就是直接改变transform.position即可，代码如下 using System.Collections; using System.Collections.Generic; using UnityEngine; public cla...
div 元素居中使用translate的坑
weixin_45172946的博客
01-21 556
div元素居中时使用translate的坑 一个小坑： 在之前用css写块级元素的居中的时候，我经常使用的写法是下面这种写法 position:absolute; left:50%; top: 50%; transform: translate(-50%,-50%); 这也是常见的方法之一。 但是今天发现该方法中的： transform: translate(-50%,-50%); 这句的作用域不只为使用该方法的元素，还包括其子元素，因此很可能会改变该元素的子元素的位置属性，可能会出现子元素位置错位的
css display 不拉伸居中
最新发布
09-18
在CSS中，display属性可以用来控制元素的显示方式。当我们想要一个元素不被拉伸的同时居中显示时，可以使用display属性配合其他属性来实现。 一种常见的方法是使用flex布局。我们可以给父元素设置display属性为flex，并设置justify-content属性为center，这样子元素就会在父元素中水平居中显示。同时，设置align-items属性为center，子元素也会在父元素中垂直居中显示。这样子，即使子元素的内容不足以填充整个空间，也不会被拉伸。例如，如下代码： ```css .container { display: flex; justify-content: center; align-items: center; } ``` 另一种方法是使用position属性。我们可以给父元素设置position属性为relative，然后将子元素的position属性设置为absolute，并设置left和top属性为50%，同时通过translate()函数将元素向左上方移动自身宽度和高度的一半，这样子元素就会在父元素中居中显示。例如，如下代码： ```css .container { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 总结来说，通过使用flex布局或position属性配合其他属性，我们可以使元素在不被拉伸的情况下居中显示。这样子，我们就能够实现不拉伸居中的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值