一、行内元素-水平居中

　　在父元素的样式中添加：　

text-align:center;

二、定宽块级元素-水平居中

　　所谓定宽块级元素指块级元素的宽度指定，而不是默认的100%，否则此方法无效；

　　代码：

html:

<body>

  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>

</body>

css:

<style>

div{

    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/

    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

}

</style>

三、不定宽块级元素-水平居中

　　三种思路：

  1. 加入 table 标签，将这个table居中；
  2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置； 
    html:
    
<body>
    
<div class="container">
    
    <ul>
    
        <li><a href="#">1</a></li>
    
        <li><a href="#">2</a></li>
    
        <li><a href="#">3</a></li>
    
    </ul>
    
</div>
    
</body>

css:
    
<style>
    
.container{
    
    text-align:center;
    
}
    
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
    
.container ul{
    
    list-style:none;
    
    margin:0;
    
    padding:0;
    
    display:inline;
    
}
    
/* margin-right:8px（设置li文本之间的间隔）*/
    
.container li{
    
    margin-right:8px;
    
    display:inline;
    
}
    
</style>

    以上是例子代码。

  3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的；

四、父元素高度确定的单行文本-垂直居中

　　思路：设置父元素的 height 和 line-height 高度一致来实现。line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

　　　　height:该元素的高度；

　　　　line-height:行高（行间距），在文本中，行与行之间基线的距离。

　　注意：这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>垂直居中</title>

<style>

.wrap h2{

    margin:0;

    /*width:20px;*/  /*如果取消注释，则文本会显示在盒子外*/

    height:100px;

    line-height:100px;

    background:#ccc;

}

</style>

</head>

<body>

<!--下面是代码任务部分-->

<div class="wrap">

    <h2>hi,imooc!</h2>

</div>

</body>

</html>

五、父元素高度确定的多行文本-垂直居中

　　两个思路：

　　　　1.使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

　　　　　　css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

html:

<body>

<table><tbody><tr><td class="wrap">

<div>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

</body>

css:

table td{height:500px;background:#ccc; vertical-align:middle;}

　　　　2.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html:

<div class="container">

    <div>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

    </div>

</div>

css:

<style>

.container{

    height:300px;

    background:#ccc;

    display:table-cell;/*IE8以上及Chrome、Firefox*/

    vertical-align:middle;/*IE8以上及Chrome、Firefox*/

}

</style>

css居中小技巧的更多相关文章

  1. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  2. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

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

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

  4. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  5. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  6. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  7. CSS设置小技巧

    水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...

  8. 【温故知新】——CSS黑魔法小技巧可以少些不必要的js

    前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...

  9. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

随机推荐

  1. 初学Python——软件目录结构规范

    为什么要设计好目录结构? 可读性高: 不熟悉这个项目的代码的人,一眼就能看懂目录结构,知道程序启动脚本是哪个,测试目录在哪儿,配置文件在哪儿等等.从而非常快速的了解这个项目. 可维护性高: 定义好组织 ...

  2. Java IO（四）——字符流

    一.字符流 字节流提供了处理任何类型输入/输出操作的功能(因为对于计算机而言,一切都是0和1,只需把数据以字节形式表示就够了),但它们不可以直接操作Unicode字符,因为一个Unicode字符占用2 ...

  3. Python 学习 第十篇：正则表达式 - re

    规则表达式(Regular Expression, RE),又称作正则表达式,通常用于检索.替换符合指定规则的文本,正则表达式定义的规则,称作模式(Pattern),即正则表达式的作用是从文本中查找到 ...

  4. flask使用基础

    1.安装 pip install Flask 基本依赖库: jinja2:实现对模板的处理 werkzeug:本质是socket服务器,用于接收http请求,并对请求进行预处理,然后触发Flaks框架 ...

  5. Bootstrap 基础讲解2

    -------------------------------------------思想是行动的先导,心理问题直接作用并影响人的思想. 知识预览 bootstrap简介 CSS栅格系统 四 表格 表 ...

  6. 什么是CLOS架构?

    Clos架构,诞生于1952年,是由一位叫Charles Clos的人提出的,所以它并不是一个新的概念. 这个架构主要描述了一种多级电路交换网络的结构.Clos最大的优点就是对Crossbar结构的改 ...

  7. elasticSearch聚合sum查询

    有时需要统计一段时间内,订单的总金额.类似于sql的sum,针对某一字段求和.这就涉及到es的聚合查询,来看看用spring-data-elasticSearch怎么写:   QueryBuilder ...

  8. p76泛函 有限维空间真子空间不可能在全空间稠密

    连续函数  然后多项式函数是稠密的 多项式子空间是无穷维的 多项式空间就是在全体连续函数的线性空间中稠密 有限维子空间是闭的 多项式空间也不是有限维 2的地方说 有限维真子空间必不稠密 那是对的啊 有 ...

  9. [2017BUAA软工助教]第0次作业小结

    BUAA软工第0次作业小结 零.题目 作业链接: This is a hyperlink 一.评分规则 本次作业满分10分: 按时提交有分 一周内补交得0分 超过一周不交或抄袭倒扣全部分数 评分规则如 ...

  10. react-router的坑

    componentWillReceiveProps(nextProps){ 在改钩子函数里接受组件变化的最近的传递的props 如果在这里没有使用nextprops 而是调用this.props 会出 ...