一：水平居中

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

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .parent{ width:300px; height:200px; border:1px solid #000; text-align: center; }

        .child{  width: 50px;  height:50px;  border:1px solid red;  display: inline-block;}

    </style>

</head>

<body>

<div class="parent">

    <div class="child"></div>

</div>

</body>

</html>

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

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

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

       .parent{

            width:300px;

            height:200px;

            border:1px solid #000;

            position: relative;//设置相对定位以配合子元素的绝对定位

        }

        .child{

            width: 50px;

            height:50px;

            border:1px solid red;

            position: absolute;

            left:50%;

            margin-left: -25px;//元素宽度的一半

        }

二，垂直居中

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

       .parent{

            width:300px;

            height:200px;

            border:1px solid #000;

            position: relative;//设置相对定位以配合子元素的绝对定位

        }

        .child{

            width: 50px;

            height:50px;

            border:1px solid red;

            position: absolute;

            top:50%;

            margin-top: -25px;

        }

第二种方法：

给parent增加
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. JS继承的从入门到理解

    开场白 大三下学期结束时候,一个人跑到帝都来参加各厂的面试,免不了的面试过程中经常被问到的问题就是JS中如何实现继承,当时的自己也是背熟了实现继承的各种方法,回过头来想想却不知道__proto__是什 ...

  2. ML - 特征选择

    1. 决策树中的特征选择 分类决策树是一种描述对实例进行分类的树型结构,决策树学习本质上就是从训练数据集中归纳出一组分类规则,而二叉决策树类似于if-else规则.决策树的构建也是非常的简单,首先依据 ...

  3. mesos支持gpu代码分析以及capos支持gpu实现

    这篇文章涉及mesos如何在原生的mesoscontainerizer和docker containerizer上支持gpu的,以及如果自己实现一个mesos之上的framework capos支持g ...

  4. sql server 备份与恢复系列二 事务日志概述

    1.1  日志文件与数据文件一致性 在上一章备份与恢复里了解到事务日志的重要性,这篇重点来了解事务日志. 事务日志记录了数据库所有的改变,能恢复该数据库到改变之前的任意状态.在sql server实例 ...

  5. sql server 性能调优之 逻辑内存消耗最大资源分析1 (自sqlserver服务启动以后)

    一.概述 IO 内存是sql server最重要的资源,数据从磁盘加载到内存,再从内存中缓存,输出到应用端,在sql server 内存初探中有介绍.在明白了sqlserver内存原理后,就能更好的分 ...

  6. 转 Mac 使用ab性能测试工具

    Mac 使用ab命令进行压测 1.在Mac中配置Apache ①启动Apache,打开终端 sudo apachectl -v 如下显示Apache的版本 sudo apachectl start 这 ...

  7. 剑指offer例题分享--4

    前言:搁置许久的更新要继续开始了!前一段时间一直在忙项目和C++的学习,所以搁置了!要改变注意了,要用C++进行编写了,因为要不断练习C++! 面试题15: 书中要求只能遍历链表一次,所以代码如下: ...

  8. 使用数组制作简易的用户管理系统【java】

    思路: 一.分析用户管理功能模块 - User类型属性值设定 private String username; // 用户id(唯一字段) private String nickname; // 昵称 ...

  9. Perl的子程序

    子程序(subroutine) perl中的子程序其实就是自定义函数.它使用sub关键字开头,表示声明一个子程序 子程序名称有独立的名称空间,不会和其它名称冲突 Perl中的子程序中可以定义.引用.修 ...

  10. Perl复制、移动、重命名文件/目录

    File::Copy复制文件 File::Copy模块提供了copy函数和cp函数来复制文件,它们参数上完全一致,但行为上稍有区别. 用法大致如下: use File::Copy qw(copy cp ...