定位:
将元素居中
将元素水平居中
将元素垂直居中
样式:
文字毛玻璃效果 -------------------------------------------代码------------------------------------------------------ 将元素居中:
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. 线程(Thread、ThreadPool)

    多线程的操作,推荐使用线程池线程而非新建线程.因为就算只是单纯的新建一个线程,这个线程什么事情也不做,都大约需要1M的内存空间来存储执行上下文数据结构,并且线程的创建与回收也需要消耗资源,耗费时间.而 ...

  2. hadoop基础操作

    通过hadoop上的hive完成WordCount 启动hadoop Hdfs上创建文件夹 上传文件至hdfs 启动Hive 创建原始文档表 导入文件内容到表docs并查看 用HQL进行词频统计,结果 ...

  3. WebGL绘制有宽度的线

    WebGL中有宽度的线一直都是初学者的一道门槛,因为在windows系统中底层的渲染接口都是D3D提供的,所以无论你的lineWidth设置为多少,最终绘制出来的只有一像素.即使在移动端可以设置有宽度 ...

  4. 初学Java的那段日子

    最近因为一个朋友想要学习Java,在帮助他找教程的过程中回想到了我自己当年学习Java的那段岁月,故写了此篇文章总结了一下初学Java所必须要掌握的知识点,然后把一部分常见的面试题罗列出来.给予刚刚开 ...

  5. #研发解决方案#研发协作平台CloudEngine

    Cloud Engine:大杀器如何炼成 郑昀(微博:http://weibo.com/yunzheng) 创建于2016/6/18 最后更新于2016/6/19 点击查看我的<如何从零搭建一个 ...

  6. [Swift]LeetCode57. 插入区间 | Insert Interval

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  7. [Swift]LeetCode451. 根据字符出现频率排序 | Sort Characters By Frequency

    Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...

  8. [Swift]LeetCode974. 和可被 K 整除的子数组 | Subarray Sums Divisible by K

    Given an array A of integers, return the number of (contiguous, non-empty) subarrays that have a sum ...

  9. vue全家桶项目搭建(vue-cli 2.9.6+vue-router+vuex+axios)

    一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...

  10. Python内置函数(66)——vars

    英文文档: vars([object]) Return the __dict__ attribute for a module, class, instance, or any other objec ...