<!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. sqlserver job 执行时间

    select instance_id,jh.run_date,jh.job_id,jh.step_name, case jh.run_status then 'failed' then 'Succee ...

  2. JSP中的<jsp:include...>和<%@include %>

    jsp中include有两种写法, 都是包含一个页面或者一个文件的意思, 写法略有不同 <jsp:include page = "url" />或者<jsp:in ...

  3. Python_08-常用模块

    1     常用模块介绍 1.1      os模块 1.2      sys模块 1.3      built-in内置模块 1.4      time模块 1.5      re模块 2     ...

  4. Python_02-控制语句

    目录:  1         控制结构...  1.1      分支语句...  1.1.1   if语句的嵌套...  1.2      for循环...  1.2.1   Python 循环中的 ...

  5. war项目部署流程

    准备: 1安装jdk1.7及以上版本 2安装tomcat7及以上版本 到%tomcat%/bin目录下记事本编辑server.xml, 配置<Connector>元素port端口,及< ...

  6. 格式化程序尝试对消息反序列化时引发异常: 尝试对参数 http://tempuri.org/ 进行反序列化时出错: GetLzdtArticleResult。InnerException 消息是“反序列化对象 属于类型 lzdt.DTO.Dtolzdt[] 时出现错误。读取 XML 数据时，超出最大

    当遇到这个错误的时候郁闷了好长时间报错是字符串长度过大可是修改了MaxStringContentLength”属性的值却不起作用最后才发现还是因为配置文件配置的问题在服务端 格式化程序尝试对消息反序列 ...

  7. 8-linux 安装 requests 时 pip install 安装不了

    安装提示更新:但是必须要sudo才行: sudo pip install --upgrade pip 安装 requests时有报错:这样写可以: sudo python -m pip install ...

  8. golang之数组

    1.数组:同一种数据类型的固定长度的序列. 2.数组定义:var a [len]int,例如:var a [5]int 3.长度是数组类型的一部分,因此,var a[5] int 和 var a[10 ...

  9. Windows 环境下分布式跨域Session共享(转)

    出处:http://www.cnblogs.com/stangray/p/3328092.html 为什么还是那句话,在网上找了N篇Session共享,但真正可以直接解决问题的还是没有找到. 一.以下 ...

  10. IntelliJ IDEA 2017版 SpringBoot徒手书写HelloWorld

    1.打开编译器,选择File---->New---->Project 2.弹出设置界面,选择如图样式的1.2.3 3.设置包名称 4.继续next 5.finish完成即可 6.自动生成目 ...