一、行内元素-水平居中

　　在父元素的样式中添加：　

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中如何对待易过期的cookies

    有时候,我们进行爬虫操作是,会使用reques的的post函数携带cookies访问目标网站已达到登录或者其他 目的,笔者最近就遇到了这样的案例,周六写好的代码,周一过来就不行了,重新登录访问目标网页 ...

  2. 在其他Activity中展示自定义相机拍的照片

    在使用相机拍照中,我们需要当点击了确定按钮之后,拍的照片展示在其他Activity的ImageView中,代码如下: 1.首先在自定义相机的Activity中,处理点击拍照确定按钮后的逻辑功能:将图片 ...

  3. Maven入门指南⑦：Maven的生命周期和插件

    一个完整的项目构建过程通常包括清理.编译.测试.打包.集成测试.验证.部署等步骤,Maven从中抽取了一套完善的.易扩展的生命周期.Maven的生命周期是抽象的,其中的具体任务都交由插件来完成.Mav ...

  4. Java多线程学习(四)---控制线程

    控制线程 摘要: Java的线程支持提供了一些便捷的工具方法,通过这些便捷的工具方法可以很好地控制线程的执行 1. join线程控制,让一个线程等待另一个线程完成的方法 2. 后台线程,又称为守护线程 ...

  5. 作为一个.NET开发者，怎么看待和选择层出不穷的新技术，新架构？

    经常在一些技术社区看到这些的问题,一个.NET开发者去求职,看到应聘的公司的技术栈还是比较老的ASP.NET WEBFORM的时候,希望了解未来会否使用ASP.NET MVC的时候,没有获得肯定答复, ...

  6. WCF系列教程之消息交换模式之请求与答复模式(Request/Reply)

    1.使用WCF请求与答复模式须知 (1).客户端调用WCF服务端需要等待服务端的返回,即使返回类型是void (2).相比Duplex来讲,这种模式强调的是客户端的被动接受,也就是说客户端接受到响应后 ...

  7. c++入门之 再话类

    对于类,其结构并不难,但要理解其设计思想也并不容易,在此,我们可以通过下面的代码进一步理解和使用类: # ifndef VECTOR_H_ # define VECTOR_H_ # include & ...

  8. pandas数据清洗策略1

    Pandas常用的数据清洗5大策略如下: 1.删除 DataFrame 中的不必要 columns 2.改变 DataFrame 的 index 3.使用 .str() 方法来清洗 columns 4 ...

  9. 写了一个Windows API Viewer,提供VBA语句的导出功能。提供两万多个API的MSDN链接内容的本地查询

    始出处:http://www.cnblogs.com/Charltsing/p/APIViewer.html QQ:564955427,QQ群:550672198 世面上的API Viewer已经不少 ...

  10. shell正则表达

    shell正则表达 .*和.?的比较: 比如说匹配输入串A: 101000000000100 使用 1.*1 将会匹配到1010000000001,匹配方法:先匹配至输入串A的最后, 然后向前匹配,直 ...