<!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. 用MyEclipse JPA创建项目

    http://www.myeclipsecn.com/learningcenter/persistence-development/myeclipse-jpa/ 用MyEclipse JPA创建项目 ...

  2. Linux TCP/IP 连接查看和问题解决

    netstat -nat|awk '{print awk $NF}'|sort|uniq -c|sort -n  上面的 命令可以帮助分析哪种Tcp状态数量异常     netstat -nat|gr ...

  3. log.error(msg)和log.error（msg,e）的显示区别

    log.error(msg): [2017-10-18 11:31:07,652] [Thread-7] (CmsCtlDataUploadFileExchange.java:50) ERROR co ...

  4. shutdown和close的区别

    [shutdown和close的区别] 当所有的数据操作结束以后,你可以调用close()函数来释放该socket,从而停止在该socket上的任何数据操作:close(sockfd); 你也可以调用 ...

  5. Country Meow

    Country Meow 和这基本一样 https://www.cnblogs.com/Fighting-sh/p/9809518.html #include<iostream> #inc ...

  6. POJ2533 最长递增子序列

    描述: 7 1 7 3 5 9 4 8 输出4 最长递增子序列为1 3 5 9,不必连续. 解法: 三种思路: 转化为最长公共子序列(n^2),动态规划(n^2),不知叫什么解法(nlogn). 解法 ...

  7. Redhat 启动mysql失败及重置密码

    cd usr/local/mysql/mysql5.6/bin [root@iZ2ze6yx6b47rdx0vccs5iZ bin]# service mysql-libs-5.1.73-8.el6_ ...

  8. Step By Step Hibernate Tutorial Using eclipse WTP[z]

     [shivasoft.in/blog/sql/myqsl/step-by-step-hibernate-tutorial-using-eclipse-wtp/] Hibernate is the O ...

  9. 同台机器2个网卡配置同段IP

    看个例子:1.on serverifconfig eth4 192.168.1.10/24 upifconfig eth5 192.168.1.11/24 up2.on clientifconfig ...

  10. OSX 下 sftp 上传目录到服务器

    使用如下命令: put –r dir mput –r dir