定位:
将元素居中
将元素水平居中
将元素垂直居中
样式:
文字毛玻璃效果 -------------------------------------------代码------------------------------------------------------ 将元素居中:
1.使用绝对定位实现1
{
width: 50px;
height: 50px; /*设置元素宽高*/
position: absolute; /*修改为绝对定位*/
top: 50%;
left: 50%; /*设置与上、左的距离*/
margin-top: -25px;
margin-left: -25px; /*外边距分别为宽高的一半*/
}
2.使用绝对定位实现2
{
position: absolute;
left: 50%;
top: 50%;
transform: tranplate(-50%, -50%);
}
3.使用父元素文本流水平居中,单元格显示垂直居中
#parent{
text-align: center; /*设置子元素水平居中*/
display: table-cell; /*设置为表格单元格显示*/
vertical-align: middle; /*设置垂直对齐方式为居中*/
}
#child{
display: inline-block;
} 将元素水平居中
1.使用外边距自动实现(相对父元素居中)
{
margin: 0 auto;
}
2.将父元素文本流水平居中,配合子元素变成行内快(child里的文字也会水平居中,可以在.child添加text-align:left;还原)
#parent{
text-align: center;
}
#child{
display: inline-block;
} 将元素垂直居中
1.将父元素设置为表格单元格显示,使内容垂直居中(子元素垂直居中)
#parent{
display: table-cell; /*设置为表格单元格显示*/
vertical-align:middle; /*设置垂直对齐方式为居中*/
} 文字毛玻璃效果
1.将文字设置成黑色透明,然后加上投影
{
color:rgba(0,0,0,0);
text-shadow: 0 0 10px black;
}

CSS代码片段的更多相关文章

  1. 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...

  2. HTML/CSS代码片段

    内容简介:本文收集了我常用的CSS代码片段! *reset @charset "utf-8"; /* reset */ body, dl, dd, h1, h2, h3, h4, ...

  3. 【转】30+有用的CSS代码片段

    来自:WEB资源网 链接:http://webres.wang/31-css-code-snippets-to-make-you-a-better-coder/ 原文:http://www.desig ...

  4. 实用的60个CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  5. 60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  6. 拥有的50个CSS代码片段(上)

    1. CSS 重置 ;;;font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-si ...

  7. (转)每位设计师都应该拥有的50个CSS代码片段

    原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...

  8. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

  9. Css学习总结(2)——60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  10. 实用的60个CSS代码片段[上]

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

随机推荐

  1. koa2学习(一)

    前期准备: node环境 npm包管理工具 安装Koa npm install --save koa 第一个程序 创建index.js const Koa = require('koa'); cons ...

  2. 关于using namespace std

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~关于using   namespace   std ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  3. UEditor之实现配置简单的图片上传示例

    UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...

  4. js封装一个模块

    (function(){ var defaultSetting = { color:'red' } Setting (options) { var self = this; self = Object ...

  5. Mesos源码分析(6): Mesos Master的初始化

      Mesos Master的初始化在src/master/master.cpp中     在Mesos Master的log中,是能看到这一行的.   1.初始化role,并设置weight权重   ...

  6. Spring Cloud Eureka 使用 IP 地址进行服务注册

    默认情况下,Eureka 使用 hostname 进行服务注册,以及服务信息的显示,那如果我们使用 IP 地址的方式,该如何配置呢?答案就是eureka.instance.prefer-ip-addr ...

  7. Centos7-驱动小米WIFI做AP

    参考文章: http://blog.csdn.net/sumang_87/article/details/38168877 http://blog.csdn.net/hktkfly6/article/ ...

  8. [Swift]LeetCode165. 比较版本号 | Compare Version Numbers

    Compare two version numbers version1 and version2.If version1 > version2 return 1; if version1 &l ...

  9. [Swift]LeetCode520. 检测大写字母 | Detect Capital

    Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...

  10. JDBC也就那么回事

    JDBC 一.JDBC概述 为什么要使用JDBC? JDBC:Java DataBase Connectivity,是SUN公司提供的一套操作数据库的标准规范(技术). JDBC与数据库驱动的关系:接 ...