水平居中和transform: translateY(-50%) 实现元素垂直居中效果

最新推荐文章于 2023-06-23 23:10:43 发布
最新推荐文章于 2023-06-23 23:10:43 发布
阅读量505 收藏 1
点赞数
原文链接：http://www.cnblogs.com/huanghuali/p/6339374.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .center {
        width: 960px;
        height: 500px;
        margin: 0 auto;
        background: #1879D9;
    }
    
    .center p {
        background: #fff;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100px;
    }
    </style>
</head>
<body>
    <div class="center">
        <p>垂直居中内容</p>
    </div>
</body>
</html>

　　效果如图：

 注意的是，当左右居中内容可能超过一半，iPhone5就会出现掉下来

如下代码：

html：

<div class="oi_price_title"><span>付费项目：一生运势详批</span></div>

 

样式：

.oi_price_title{ position: relative; text-align: center;font-size: 0.15rem;margin-bottom: 0.05rem;min-height: 0.24rem; text-align: center;}
.oi_price_title:before{ content: ""; position: absolute; left: 0; top:50%; transform: translateY(-50%);-webkit-transform: translateY(-50%); height: 1px; width: 100%; background-color: #fae5ca }
.oi_price_title span{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); z-index: 1; background-color: #fcefdd; height: 0.22rem; line-height: 0.22rem; padding: 0 0.05rem; border:1px solid #fae5ca; border-radius: 3px; font-size: 0.14rem; }

 

如图：

 最终样式改为：

.oi_price_title{ position: relative; text-align: center;font-size: 0.15rem;margin-bottom: 0.05rem;min-height: 0.24rem; text-align: center;}
.oi_price_title:before{ content: ""; position: absolute; left: 0; top:50%; transform: translateY(-50%);-webkit-transform: translateY(-50%); height: 1px; width: 100%; background-color: #fae5ca }
.oi_price_title span{ position: relative; z-index: 2; background-color: #fcefdd; height: 0.22rem; line-height: 0.22rem; padding: 0 0.05rem; border:1px solid #fae5ca; border-radius: 3px; font-size: 0.14rem; }

 

转载于:https://www.cnblogs.com/huanghuali/p/6339374.html

diebaiying3731
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现div元素在整个屏幕的的垂直居中之translateY(-50%)的利用
weirnoon的博客
02-23 866
哈哈哈，今天我发现了一个超级好用的div在整个页面的垂直居中的方法，那就是巧用transform: translateY(-50%)。如果不知道这个是什么意思可以看看 点击打开链接 http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatey举个例子：有一个元素我们想让他位于整个屏幕的右侧20px，并且是垂直居中的，那么我们应该怎么...
transform translateY(-50%) 实现元素垂直居中效果
weixin_30482181的博客
09-04 313
在相对的空间内，垂直居中。position: relative;top: 50%;transform: translateY(-50%); 无论内容怎么增加，全文都是垂直居中的。 转载于:https://www.cnblogs.com/peko/p/7473219.html...
transform:translate(-50%,-50%)水平垂直居中效果
vicky_yongqi的博客
12-02 4841
transform: translateY(-50%) 实现元素垂直居中效果 transform:translate(-50%,-50%)实现水平垂直居中 通过position absolute和top 50%，结合transform产生效果。 eg.头部CSS排版 <style lang="stylus" rel="stylesheet/stylus"> .top_contai...
css3-- transform: translate(-50%,-50%);
yueliangyefan的博客
06-27 7606
代码： position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 ...
transform: translateY(-50%) 实现元素垂直居中效果
时清云的博客
09-10 3137
html> html lang="en"> head> meta charset="UTF-8"> title>transformtitle> style> .demo1{ position: relative; width: 200px; height: 200px;
div垂直居中-CSS元素垂直居中方法的探究
06-11
一种是使用绝对定位，设置`position: absolute`，然后配合`top: 50%`和`transform: translateY(-50%)`，元素会相对于其父元素的顶部偏移自身高度的一半，达到垂直居中效果。这种方法需要父元素设置`position: ...
vertical-center:垂直水平居中元素
03-31
对于不确定宽度和高度的元素，可以使用CSS3的`transform`属性，通过`translateY(-50%)`来实现垂直居中： ```css .centered-element { position: absolute; top: 50%; transform: translateY(-50%); } ``` 然后...
JavaScript 未知高度元素垂直居中实现代码
12-02
3. **CSS Transforms**：使用`transform: translateY(-50%)`结合`position: relative`也能实现垂直居中。 ```css #wrap { position: relative; top: 50%; transform: translateY(-50%); } ``` 每种方法都有其...
5.（vue3.x+vite）水平垂直居中实现方式.rar
最新发布
09-22
本教程主要探讨在Vue 3.x框架结合Vite构建的项目中，如何实现元素的水平垂直居中。Vue 3.x提供了更好的性能和更简洁的API，而Vite则是一个由Vue.js作者尤雨溪开发的现代化的前端构建工具，它提供了更快的启动速度和...
利用css设置元素垂直居中的解决方法汇总
09-24
transform: translateY(-50%); } ``` - **方法二（不使用`transform`）**：利用上下边缘同时为0的外边距实现自动居中。 ```css .parent { position: relative; width: 100%; height: 100%; } .child { ...
水平居中和transform: translateY(-50%) 实现元素垂直居中
xianengneng的博客
11-01 5353
垂直居中 垂直居中内容 原理 transform: translateY(-50%); 让div 沿Y轴平移自身高度的一半
详解transform:translate(-50%,-50%)
热门推荐
qq_41083105的博客
03-26 3万+
关于transform:translate(-50%,-50%) 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。 这句话的应用场景是实现块居中，具体实现如下： <style> .outer { width: 300px; height: 300px; posit...
【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系
小秀的博客
06-23 2186
`top: 50%;` 和 `transform: translateY(-50%);`的区别和联系
transform: translateY(-50%)实现垂直居中效果
彭世瑜的博客
08-04 2778
<style> * { margin: 0; padding: 0; } .center { width: 960px; height: 500px; margin: 0 auto; background: #1879d9; } .center p { background: #fff; position: relative; top: 50%; left: 0; right: 0;
html图片顺时针倾斜50度,html – 使用transform进行垂直对齐：translateY(-50％);里面绝对定位的div...
weixin_42521186的博客
06-04 355
我正在尝试使用以下代码将h2垂直居中在div内,该div绝对定位高度为50％：#owl-demo h2 {position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}在Chrome上正常工作,但是在Safari...
元素居中 前端
qq_48254349的博客
11-26 202
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
css中的“ transform: translate(-50%, -50%)； “的意思
qq_45207162的博客
06-14 5802
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
纯CSS实现多行文字垂直居中几种方法解析
猫儿不哭
12-10 310
原文链接 ：https://www.cnblogs.com/goloving/p/7657544.html 场景：父元素 高度固定，如何使其中的文字垂直居中？ 1、table布局： 　　利用display:table+display:table-cell的方法 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt...
transform: translateY(-50%）
06-13
在这个例子中，`translateY(-50%)` 表示将元素向上移动自身高度的一半，通常用于实现垂直居中的效果。 需要注意的是，`transform` 属性需要浏览器支持，并且在一些情况下可能会影响元素的布局和渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值