一：水平居中

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. (webpack系列二)webpack打包优化探索

    虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条 ...

  2. 如何在 Linux 中查看可用的网络接口

    在我们安装完一个 Linux 系统后最为常见的任务便是网络配置了.当然,你可以在安装系统时进行网络接口的配置.但是,对于某些人来说,他们更偏爱在安装完系统后再进行网络的配置或者更改现存的设置.众所周知 ...

  3. SpringMvc参数传递中乱码问题

    问题描述: 当传递中文参数到controller类时,无乱是get方式还是post方式都出现乱码 解决: 1.保证所有的页面编码都是utf-8,包括jsp页面,浏览器编码设置和eclipse的编码设置 ...

  4. HP服务器设置iLO

    HP服务器设置iLO步凑 1.开机出现界面—按下F11进入Boot Menu: 2.选择Generic USB Boot回车: 3.选择System Configuration回车: 4.选择iLO ...

  5. Centos7使用docker搭建gitlab服务器

    了解到docker的优点,搭建快,运行要求资源低,最重要的是实现的功能和效果都能达到预期,于是决定使用docker来搭建gitlab服务器. 效果图如下: 系统环境:CentOS Linux rele ...

  6. Intellij idea常用快捷键和技巧

    一.常用快捷键 搜索 double shift 全文搜索内容 ctrl + shift + f 搜索文件 Ctrl + shift + n 打开项目窗口  Alt + 1 智能代码补全 Ctrl+Sh ...

  7. Android主线程的消息系统(Handler\Looper)

    前言: 之前的文章写的都是关于Bitmap和内存的优化技术,这一篇文章给大家谈谈Handler. Handler是Android系统中比较重要的一个知识,在Android多线程面试经常会被问到,在实际 ...

  8. 【Flask-RESTPlus系列】Part3：请求解析

    0x00 内容概览 请求解析 基本参数 必需参数 多值和列表 其他目标 参数位置 参数多个位置 高级类型处理 解析器继承 文件上传 错误处理 错误消息 参考链接 0x01 请求解析 注意:Flask- ...

  9. Java网络编程的基本网络概念

    前言 自己网络这方面的知识很是薄弱,每次面试被问到这部分都会卡壳,所以很尴尬,然后最近也是有些时间了,就赶紧把自己的不足补充一下.虽然最近也在看设计模式,但是总看设计模式也容易烦,所以就并行学习,看看 ...

  10. 【NET CORE微服务一条龙应用】第三章 认证授权与动态权限配置

    介绍 系列目录:[NET CORE微服务一条龙应用]开始篇与目录 在微服务的应用中,统一的认证授权是必不可少的组件,本文将介绍微服务中网关和子服务如何使用统一的权限认证 主要介绍内容为: 1.子服务如 ...