translate()函数，水平垂直居中

已于 2023-02-24 15:23:50 修改
阅读量1.7k 收藏 6
点赞数 2
文章标签： css html css3 javascript 前端
于 2022-06-14 11:24:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58431406/article/details/125274804
版权
本文介绍了CSS3的translate()函数如何在未知宽高的条件下实现元素的水平垂直居中。通过设置父元素相对定位，子元素绝对定位，再结合transform:translate(-50%,-50%)，可以轻松达成居中效果。transform:translateY(-50%)用于垂直居中，transform:translateX(-50%)则实现水平居中。
摘要由CSDN通过智能技术生成

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。

父元素：position: relative;

子元素：     position: absolute;
                           top: 50%;
                           left: 50%;
                 transform: translate(-50%, -50%);  

transform: translateY(-50%)垂直居中。

transform: translateX(-50%)为水平居中。

transform:translate(-50%,-50%)水平垂直居中。


 

小付-小付
关注
利用transform：translate使div居中显示
丑小鸭变黑天鹅的博客
04-22 1459
利用transform：translate使div居中显示 之前一直在用这个属性让某个div居中显示，但是一直有一个困惑，我想同时让水平和垂直都居中，可是水平方向总会有一点偏差，看一下以前怎么写的。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { mar
DIV以及图片水平垂直居中兼容多种浏览器
09-22
在网页设计中，让元素（如DIV或图片）在页面上水平垂直居中是一项常见的需求。这有助于确保用户无论在何种设备或浏览器上查看页面，都能获得一致的视觉体验。以下将详细介绍两种纯CSS方法以及一种JavaScript辅助的...
采用translate实现垂直水平居中
desuosu2755的博客
07-09 144
今天分享一个利用css3新特性实现垂直水平居中的方法。 通过对元素进行绝对定位再配合transform中的translate实现。 代码如下： html <div id="content"> <div class="a"> <img src="...jpg" /> </div> <...
利用translate()进行水平垂直居中
热门推荐
mr_fzz的博客
11-08 2万+
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中. 代码如下://html: <div class='wrap'> 我不知道宽高，但是我就是要水平垂直居中 </div>//css .wrap{ padding:10px; background:green; color:#fff; position:abso
css——利用translate让元素居中
叶落无痕的博客
08-30 1119
css——利用translate让元素居中 父元素： position: relative; 居中元素： position: absolute; top: 50%; //基于父元素 left: 50%; //基于父元素 transform: translate(-50%, -50%); //基于自身 注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性在作元素位移时，极有可能发生像素点无法对齐的情况。正常情况下，元素的边缘应该和像素..
translate()进行水平垂直居中
前端博客
09-10 2270
html &lt;div class="load_box"&gt; &lt;div class="load_cont"&gt; &lt;div class="load_img"&gt;&lt;/div&gt; 加载失败，稍后再试 &lt;/div&gt; &lt;/div&gt; css
css让容器水平垂直居中的7种方式
09-27
在CSS布局中，让容器水平垂直居中是常见的需求，特别是在设计响应式网站或移动应用时。以下将详细介绍七种实现这一目标的方法。 1. **Position + Margin** 这种方法利用绝对定位和负margin来实现居中。首先，外层...
CSS中的translate(-50%,-50%)实现水平垂直居中效果
01-21
与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比 (使用top和left为50%时，以窗口左上角为原点)。 示例： ...
layer弹出层自适应高度,垂直水平居中的实现
10-16
`layer` 是一个常用的 JavaScript 弹窗插件，它提供了丰富的功能，包括弹出层的自适应高度和垂直水平居中。本文将详细讲解如何利用 `layer` 实现这些效果。 首先，我们来关注高度自适应的问题。在 `layer` 中，当弹...
DIV水平垂直居中
07-18
在网页设计中，让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一...
Translate实现水平垂直绝对居中
weixin_30787531的博客
09-17 205
translate实现绝对居中效果。 translate一直是我实现居中效果众多属性中最多的一个属性，我认为这个属性简单，使用方便，在此小记。 translate(X,Y)定义2D转换，其中X是定义X轴的值，Y轴是定义Y轴的值。 　　　　　　 position: absolute; left: 50%; top: 50%; ...
利用translate实现垂直居中
weixin_33826609的博客
06-30 98
<!DOCTYPE html> <html> <head> <title>居中</title> <style type="text/css"> .parent{ width...
[css] translate实现水平垂直绝对居中
qq_14993591的博客
09-15 267
position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); 这种方法可以不用知道宽高 参考： https://www.cnblogs.com/luna666/p/9662173.html
CSS学习笔记——transform:translate(-50%,-50%)实现水平垂直居中
Jane的博客
01-07 2711
参考： https://blog.csdn.net/qq_41083105/article/details/115233510 https://www.cnblogs.com/knuzy/p/9993181.html translate()的使用 translate() 函数是CSS3的新特性。在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。 当使用下述样式， 块是以左上角为原点，故不处于中心位置。 top: 50%; left: 50%; 而 translate(-50%,-50%) 作用是，往
居中，transform：translate(x,y)来设置居中
leixu1027的博客
10-18 1707
我在以前也写过margin和flex的博客，可以自行查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ...
translate(-50%,-50%)实现居中
lamanchas的博客
11-03 1万+
转载链接：http://www.imooc.com/qadetail/129282<!--html--> <body> <div>这是用来测试的</div> </body>/*CSS*/ div{ position:absolute; top:50%; left:50%; /*如果把这几行删掉，不可以居中 */ border-radius: 5px; -webkit-transform:trans
CSS水平垂直居中的方法（Flex、Grid、translate、margin..）
最新发布
qq_44396859的博客
10-10 1116
其实网上还有一些神通广大的网友的方法能够实现，但由于代码量的问题或者副作用的问题较多，就不再赘述，本文介绍的以上几种方法按照顺序依次推荐。参考链接：元素水平垂直居中都有哪些方法 - 简书。
利用translate进行上下居中，你会了吗？
阿小绿的博客
07-07 594
话不多说，先看效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>上下左右居中</title> <style type="text/css"> .box { wid
实现元素水平垂直居中的方法
05-11
使用transform属性的translate函数可以将元素相对于自身进行定位，从而实现水平垂直居中。具体实现方法如下： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值