一：水平居中

1. 如下所示，让child在parent中水平居中

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .parent{ width:300px; height:200px; border:1px solid #000; text-align: center; }
  8.         .child{  width: 50px;  height:50px;  border:1px solid red;  display: inline-block;}
  9.     </style>
  10. </head>
  11. <body>
  12. <div class="parent">
  13.     <div class="child"></div>
  14. </div>
  15. </body>
  16. </html>

第一种方法：给父元素添加text-align：center属性，把子元素变成行内框，display：inline-block；（子元素可以是行内元素也可以是块级元素）

第二种方法：给子元素添加margin:0 auto;属性（子元素必须有宽度，而且必须是块级元素）；

第三种方法：利用绝对定位和相对定位实现

  1.        .parent{
  2.             width:300px;
  3.             height:200px;
  4.             border:1px solid #000;
  5.             position: relative;//设置相对定位以配合子元素的绝对定位
  6.         }
  7.         .child{
  8.             width: 50px;
  9.             height:50px;
  10.             border:1px solid red;
  11.             position: absolute;
  12.             left:50%;
  13.             margin-left: -25px;//元素宽度的一半
  14.         }

二，垂直居中

第一种方法：和上面一样利用绝对定位

  1.        .parent{
  2.             width:300px;
  3.             height:200px;
  4.             border:1px solid #000;
  5.             position: relative;//设置相对定位以配合子元素的绝对定位
  6.         }
  7.         .child{
  8.             width: 50px;
  9.             height:50px;
  10.             border:1px solid red;
  11.             position: absolute;
  12.             top:50%;
  13.             margin-top: -25px;
  14.         }

第二种方法：

  1. 给parent增加
  1. display:table-cell;
    vertical-align: middle;

css和HTML布局小技巧的更多相关文章

  1. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  2. css选择器顺序的小技巧

    在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...

  3. CSS中的一下小技巧2之CSS3动画勾选运用

    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...

  4. css的几个小技巧

    本文收录css设置样式的一些小技巧 1. 设置文字在块级标签居中(包括水平居中和垂直居中) 水平居中 方法一:使用text-align text-align:center 方法二:目标标签的父级标签设 ...

  5. CSS中的一下小技巧1之CSS3三角形运用

    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

  6. css浮动布局小技巧

    父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...

  7. css布局小技巧 2016.03.06

    偶遇一个可爱的css布局学习网站,立刻学起来哟- max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦- max- ...

  8. 超 Nice 的表格响应式布局小技巧

    今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...

  9. 25条div+CSS编程提醒及小技巧整理

    1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...

随机推荐

  1. CentOS 7.4 安装 K8S v1.11.0 集群所遇到的问题

    0.引言 最近打算将现有项目的 Docker 部署到阿里云上面,但是之前是单机部署,现在阿里云上面有 3 台机器,所以想做一个 Docker 集群.之前考虑是用 Docker Swarm 来做这个事情 ...

  2. Java核心技术及面试指南面试题，基本数据类型、封装类和运算操作的面试题

    2.1.5.1说说&和&&的区别,以及|与||的区别. &和|是位运算符,不怎么用,而&&和||是逻辑运算符,一般用在if,while,for等条件判断 ...

  3. mysql 开发进阶篇系列 13 锁问题(关于表锁，死锁示例，锁等待设置)

    一. 什么时候使用表锁 对于INNODB表,在绝大部分情况下都应该使用行锁.在个别特殊事务中,可以考虑使用表锁(建议). 1. 事务需要更新大部份或全部数据,表又比较大,默认的行锁不仅使这个事务执行效 ...

  4. 用canvas实现红心飘飘的动画效果

    两周前,项目里需要实现一个红心飘飘的点赞效果.抓耳挠腮了老半天,看了几篇大佬的文章,终于算是摸了个七七八八.不禁长叹一声,还是菜啊.先来看一下效果:(传送门进去点一波) 一.Bezier曲线运动轨迹 ...

  5. java --Integer 学习

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 在网上看到一个面试题,没有完全做, 本代码基于JDK8 //下面代码运行结果是 public class ...

  6. 自动生成实体类和xml

    1 首先eclipse需要安装一个插件 2 两个配置文件 1 generator.properties 2 generator.xml <?xml version="1.0" ...

  7. Python机器学习笔记：常用评估指标的用法

    在机器学习中,性能指标(Metrics)是衡量一个模型好坏的关键,通过衡量模型输出y_predict和y_true之间的某种“距离”得出的. 对学习器的泛化性能进行评估,不仅需要有效可行的试验估计方法 ...

  8. Python机器学习笔记 K-近邻算法

    K近邻(KNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一. 所谓K最近邻,就是K个最近的邻居的意思,说的是每个样本都可以用它最接近的k个邻居来代表.KNN算法的 ...

  9. spring-boot-2.0.3之quartz集成，不是你想的那样哦！

    前言 开心一刻 晚上回家,爸妈正在吵架,见我回来就都不说话了,看见我妈坐在那里瞪着我爸,我就问老爸“你干什么了惹我妈生这么大气?”  我爸说“没有什么啊,倒是你,这么大了还没有媳妇,要是你有媳妇给我们 ...

  10. 深入浅出zookeeper之一：功能及本质

    zookeeper(下文简写为zk)大家都不陌生.但是,看到很多同学对zookeeper的理解过于程式化,有些地方甚至需要背,是大可不必的.把本质理解了,概念性和功能介绍都可以推出来的,而且架构要活学 ...