针对之前遇到过的一些特殊样式的实现，我今天做个总结，目的有二：一是将这些方法记录下来，以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大，让广大前端程序猿们能够少走弯路。此贴为更新帖，以后若有好的css样式技巧，小菜我会不定期更新。

一、块元素水平垂直居中
对于一个块元素的水平垂直居中，水平居中的方式不必多说，一般用margin:auto;等方法即可实现。而对于垂直居中，尽管有vertical-align:middle属性，但是由于其只适用于table标签中，而table标签效果不好控制的特点大家都懂。。。因此，我们一般常用的方法是：将子级元素设定inline-block属性，并将其行高属性：line-height的值设定为与父级元素相同的高度。
代码如下：
html方面：
  1. <body>
  2. <div class="big">
  3. <div class="small"></div>
  4. </div>
  5. </body>
css方面：　
  1. .big
  2. {
  3. width:500px;
  4. height:500px;
  5. border:1px solid red;
  6. position:relative;
  7. }
  8. .small{
  9. width:200px; /*自己元素宽高可任意设定 */
  10. height:200px;
  11. position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;
  12. margin:auto;
  13. background-color:#cc9900;
  14. }
在上述代码中，子级元素的宽高是任意设定的。都可以实现此元素在父级元素中水平垂直居中显示。在父级元素中，我们用了position的relative属性。在子级元素中，我们将它的position属性设定为absolute后，将四个方向的值都设定为0px。并且让他的margin值自适应。从审查元素中我们可以发现，如此设定后，子级元素的margin区域会充满整个父级元素，并且左右margin值是相等的，上下margin值亦如此。但是这并不符合，当代码数值有冲突时，优先解析top值及left值的规律。因为究竟是什么原理，小菜也不得而知。。如果有大神知晓，还望不吝赐教。但是这不失为一种好的办法，希望大家活学活用。
二、after伪类清浮动
通常我们在对块元素设浮动以后，需要对其清浮动，以免布局混乱。常见的清浮动方法主要有两种：1）、在后面的子元素css中写"clear:both;"。2）在浮动元素的父级元素中写"overflow:hidden"。现在，我们可以用第三种方法，利用after伪类写一个浮动属性，这样只要有需要清楚浮动的地方，我们就给其父元素加上这样一个浮动属性就可以了。
代码如下：
  1. .clearfix:after
  2. {
  3. content:"";
  4. display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/
  5. clear:both;
  6. }
这种方法有个好处，即可以将其写入reset中，之后可以多次调用。

CSS块元素水平垂直居中的实现技巧相关推荐

  1. CSS实现元素水平垂直居中的各种方法

    关于 CSS 如何将元素进行水平垂直居中的几种常用方法 前言 在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...

  2. css实现元素水平垂直居中——6种方式

    实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局 利用定位+margin:auto ...

  3. css实现元素水平垂直居中 1

    css的居中,可以分为水平居中和垂直居中,实现居中的方式有以下几种: 1.text-align:center 块状元素,水平居中(只适用于块级元素,块级元素内的行内元素可以居中或者将此行内元素设置为块 ...

  4. css实现元素水平垂直居中

    记录两个思路,当然还有其他方法,如果用到再补充: <div class="parent" style="background:red;width:200px;hei ...

  5. 利用css实现元素水平垂直居中的方法（分情况讨论）

    首先需要说明,根据标准盒模型(这里暂且不关注低版本IE的盒模型),我们在css中设置的width指的是content-width,padding,margin,top,left这些属性为百分数时,计算 ...

  6. js、css分别实现元素水平垂直居中

    js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...

  7. CSS Transform让百分比宽高布局元素水平垂直居中

    CSS Transform让百分比宽高布局元素水平垂直居中 很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...

  8. 块级、行内元素水平垂直居中方法

    块级.行内元素水平垂直居中方法 块级元素水平垂直居中 // 为目标元素设置以下属性 position: absolute; /*top: 0;*/ left: 0; right: 0; bottom: ...

  9. CSS中实现div元素水平垂直居中

    常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...

最新文章

  1. Servlet----ServletContext
  2. CVPR论文 | 所见所想所找：基于生成模型的跨模态检索
  3. ubuntu14.04 下安装jdk1.8
  4. python爬虫可以爬哪些山_从python爬虫，到更爱这个世界
  5. Java Bean 为什么必须要有一个无参构造函数？
  6. stata主成分分析_主成分分析在STATA中的实现
  7. ssm(Spring+Spring mvc+mybatis)Service层实现类——DeptServiceImpl
  8. 华为上机试---购物单（算法：背包问题）
  9. iPhone 九、十月份在中国销量曝光：真的卖疯了！
  10. python基础之字符串定义常见操作、列表定义进阶操作
  11. doctest使用注意点 -- 省略号的使用
  12. 用户故事与敏捷方法笔记---迭代计划
  13. VBA 收集 Word关键字批量处理-Excel版
  14. CPAL脚本自动化测试 ———— Test Report系列函数及使用
  15. php 银联支付-app
  16. MAXScript学习笔记(1)
  17. mariadb BSL协议期限
  18. 质量保证QA与质量控制QC
  19. Image 图像转化为 PDF 文件
  20. 推荐一个Intellij IDEA插件--Key Promoter X

热门文章

  1. MATLAB中，信号的频谱图该怎么绘制？横坐标如何标注出频率值？
  2. linux时间路径,关于linux中的时间 时区问题
  3. 用友U9执行JS代码。
  4. python 安装虚拟环境virtualenv
  5. DS树+图综合练习--构建邻接表
  6. 18.8.20 考试总结
  7. Debug method
  8. Nginx配置proxy_pass
  9. [水煮 ASP.NET Web API2 方法论]（1-6）Model Validation
  10. Block(Closure) Tips