<!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:; 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:; 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:; top:50%; transform: translateY(-50%);-webkit-transform: translateY(-50%); height: 1px; width: 100%; background-color: #fae5ca }

.oi_price_title span{ position: relative; z-index:; 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; }

水平居中和transform: translateY(-50%) 实现元素垂直居中效果的更多相关文章

  1. transform: translateY(-50%) 实现元素垂直居中效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 三行代码实现垂直居中和cube

    三行代码实现上下居中 position: relative;top: 50%;transform: translateY(-50%); 效果如下:   代码: <!DOCTYPE html> ...

  3. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  4. CSS(3)多种方法实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  5. 黄聪：用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  6. 用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  7. 浮动元素垂直居中，bootstrap栅格布局垂直居中

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css元素垂直居中的8中方法

    1. 通过vertical-align:middle实现CSS垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...

  9. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

随机推荐

  1. Git----分支管理01

    分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没有啥影响,不过,在某个时间点,两个平行宇宙合 ...

  2. Eclipse安装Freemarker Editor插件

    在下面网址里下载freemarker-ide: http://sourceforge.net/projects/freemarker-ide/files/ 下载完成后后解压,由于该IDE里面的free ...

  3. 基于jquery-ui及bootstrap的可拖拽模态框

    可直接使用代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. Source命令及脚本的执行方式

    ［Source命令及脚本的执行方式］ source filename 与 sh filename 及./filename执行脚本的区别在那里呢? 1.当shell脚本具有可执行权限时,用sh file ...

  5. S 联系人新增及更新

    一.联系人新增 [Public] ConnectString=host="siebel://10.10.1.139:2321/SBA_82/SMObjMgr_chs ConnectUserN ...

  6. tomcat服务编码集设置

    有三处需要记住修改 截图如下效果图: 第一处,对控制台右键,选择“默认值”找到,并设置为gbk: 第二处,在conf中找到server.xml文件并设置: 第三处:找到bin文件,找到tomcat80 ...

  7. mybatis xml中常见配置demo

    新增: <insert id="insertSelective" parameterType="map" > insert into BS_CHNG ...

  8. fiddler手机抓包

    配置好之后,发现手机不能连接代理服务器,用netstat发现根本就没有手机的ip地址,于是猜想是不是防火墙的问题,关闭防火墙果然能连上,开启防火墙又连不上了,这就说明确实是防火墙的问题,关闭防火墙又很 ...

  9. Differential expression analysis for paired RNA-seq data 成对RNA-seq数据的差异表达分析

    Differential expression analysis for paired RNA-seq data 抽象背景:RNA-Seq技术通过产生序列读数并在不同生物条件下计数其频率来测量转录本丰 ...

  10. CodeForces 518B Tanya and Postcard （题意，水题）

    题意:给定两个字符串,然后从第二个中找和第一个相同的,如果大小写相同,那么就是YAY,如果大小写不同,那就是WHOOPS.YAY要尽量多,其次WHOOPS也要尽量多. 析:这个题并不难,难在读题懂题意 ...