<!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. 重新设定McAfee Agent的菜单语言

    默认安装的McAfee Agent,语言会根据系统中的设置,自动选择了语言. 有时想更换语言,却又不想重装McAfee Agent (以前叫 ePO Agent) 其实可以直接运行下面的命令进行重新设 ...

  2. [X264] MinGW编译x264,VC中调用libx264.dll-------------<参考转>

    1. 下载并按照MinGW,最好就缺省按照    http://sourceforge.net/projects/ ... ler/mingw-get-inst/    把C:\MinGW\bin添加 ...

  3. nodepad++快捷键

    在用notepad++进行代码编辑的过程中,其实notepad++也可以进行单行.多行.区块注释和取消注释的....... 快捷键如下: 单行.多行注释              //方式       ...

  4. JDK静态代理示例代码

    JDK静态代理示例代码 业务接口 接口的实现类 代理类,实现接口,并扩展实现类的功能 1.业务接口 /** * 业务接口 * @author pc * */ public interface User ...

  5. 【328】Python 控制鼠标/键盘+图片识别 综合应用

    本文是基于 [267]实现跨网络传数据 的基础上的,由于在弹出 putty 之后,需要手动输入命令(pass.sh.get.sh)来实现数据的传递,另外就是处理完之后需要手动关闭 putty,本文解决 ...

  6. python 安装pyqt4

    yum install PyQt4-devel yum install qtwebkit-devel pip install PySide

  7. 新手C#类、对象、字段、方法的学习2018.08.05

    类:具有相似属性和方法的对象的集合,如“人”是个类. 对象(实例):对象是具体的看得见摸得着的,如“张三”是“人”这个类的对象.(new Person()开辟了堆空间中,=开辟了栈空间,变量P存放在该 ...

  8. Unity加载二进制数据

    [Unity加载二进制数据] The first step is to save your binary data file with the ".bytes" extension ...

  9. Python_04-字符串操作

    1      字符串的运算 字符串是程序中经常使用的元素,字符串的运算也很多,包括连接两个字符串,取一个字符串中的一部分,称为取子字符串,大小写转换,字符串与数值的转换等. 1.1   字符串的连接 ...

  10. mysql索引原理及用法

    MySQL索引原理及慢查询优化 Mysql explain用法和性能分析 MySQL 索引优化全攻略 1．索引作用 在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提 ...