一、行内元素-水平居中

　　在父元素的样式中添加：　

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. PostgreSQL安装和使用

    青岛OJ系统用的关系型数据库是PostgreSQL,为此对PostgreSQL大致了解下. 今天的主要话题围绕下面两个方面: PostgreSQL安装 PostgreSQL使用 一.PostgreSQ ...

  2. hdu4966 GGS-DDU

    hdu4966 GGS-DDU 有 \(n\) 个课程,每种课程有 \(a_i\) 级,一开始你每种课程都为 \(0\) 级,有 \(m\) 个升级方案:\((x,\ l1,\ y,\ l2,\ c) ...

  3. HDU-1698-Just a Hook-线段树区间修改

    In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of the heroes. T ...

  4. Linux运维必会的MySQL企业面试题大全

    (1)基础笔试命令考察 1.开启MySQL服务 /etc/init.d/mysqld start service mysqld start systemctl start mysqld 2.检测端口是 ...

  5. JAVA验证身份证格式及合法性

    旅游电子商务中,预订酒店或订购门票时会以身份证作为消费凭证,为了防止客户误填身份证带来不必要麻烦,需要验证码格式及合法性,代码如下: /** * 判断身份证格式 * * @param idNum * ...

  6. Go源码编译安装

    参考文档1:https://www.cnblogs.com/majianguo/p/7258975.html 参考文档2:http://www.loongson.cn/news/company/456 ...

  7. 从HelloWorld开始学习.NET Core

    1.首先创建一个项目文件夹,如E:\CoreProjects 使用cmd命令进入到新建的文件夹中 2.创建一个HelloWorld项目 命令:dotnet new console -o hellowo ...

  8. win8.1系统下安装ubuntu实现双系统实践教程

    寒假闲来无事,一程序猿哥们给发了一个linux的shell编程指南,看了几张感觉不错.于是装一个试试. 没想到一装才知道了那么的问题. 下面开始: step 1: 软件准备:Ubuntu 系统镜像,这 ...

  9. [LeetCode] Rank Scores -- 数据库知识(mysql)

    Write a SQL query to rank scores. If there is a tie between two scores, both should have the same ra ...

  10. vuex原理

    Vuex 框架原理与源码分析 vuex状态管理到底是怎样一个原理? 状态管理 Vuex框架原理与源码分析 Vuex实现原理解析 Vue刚出不久,Vuex 就出来了,想请教下Vuex做了什么事情? 个人 ...