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 1452
利用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 1115
css——利用translate让元素居中 父元素： position: relative; 居中元素： position: absolute; top: 50%; //基于父元素 left: 50%; //基于父元素 transform: translate(-50%, -50%); //基于自身 注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性在作元素位移时，极有可能发生像素点无法对齐的情况。正常情况下，元素的边缘应该和像素..
translate()进行水平垂直居中
前端博客
09-10 2269
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 266
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 2690
参考： 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 1104
其实网上还有一些神通广大的网友的方法能够实现，但由于代码量的问题或者副作用的问题较多，就不再赘述，本文介绍的以上几种方法按照顺序依次推荐。参考链接：元素水平垂直居中都有哪些方法 - 简书。
利用translate进行上下居中，你会了吗？
阿小绿的博客
07-07 593
话不多说，先看效果图 <!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
实现元素水平垂直居中的方法有多种，下面列举几种比较常用的方法： 1. 使用flex布局 使用flex布局可以很方便地实现元素的水平垂直居中。具体实现方法如下： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. 使用绝对定位 使用绝对定位可以将元素相对于父元素进行定位，从而实现水平垂直居中。具体实现方法如下： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 3. 使用表格布局 使用表格布局可以将元素放置在表格单元格中，并通过设置单元格的垂直和水平对齐方式来实现元素的水平垂直居中。具体实现方法如下： ```css .container { display: table; width: 100%; height: 100%; } .box { display: table-cell; text-align: center; /* 水平居中 */ vertical-align: middle; /* 垂直居中 */ } ``` 4. 使用transform属性 使用transform属性的translate函数可以将元素相对于自身进行定位，从而实现水平垂直居中。具体实现方法如下： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 以上是一些比较常用的方法，还有其他一些方法可以实现元素的水平垂直居中，可以根据具体情况进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值