一、行内元素-水平居中

　　在父元素的样式中添加：　

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. Python2 处理 Unicode 字符串的规则

    在 Python2 中处理 Unicode 字符串,需遵循如下规则: 1. 程序中的字符串要加前缀 u 2. 不要用 str(),而应该用 unicode() 作为字符串转换函数.不要使用 chr() ...

  2. Spring(1)_Bean初始化_逻辑图

  3. 【CTF杂项】常见文件文件头文件尾格式总结及各类文件头

    文件头文件尾总结 JPEG (jpg), 文件头:FFD8FF 文件尾:FF D9PNG (png), 文件头:89504E47 文件尾:AE 42 60 82GIF (gif), 文件头:47494 ...

  4. 修复XSS跨站漏洞

    XSS跨站漏洞最终形成的原因是对输入与输出没有严格过滤. 1.输入与输出 在HTML中,<,>,",',&都有比较特殊的意义.HTML标签,属性就是由这几个符合组成的.P ...

  5. HTTP协议、HTTP请求方法、常见状态码、HTTP消息

    HTTP协议 客户端请求,服务端响应.浏览器与服务器不建立持久连接,响应后连接失效. HTTP请求方法 一.GET GET方法用于获取请求页面的指定信息. 二.HEAD 除了服务器不能在响应里返回消息 ...

  6. windows系统VS2017编译boost

    1. 下载boost, 解压,进入boost源目录 2. 打开vs2017 x86 CMD工具,输入bootstrap.bat,等待初始化完毕 x86编译 bjam stage --toolset=m ...

  7. echarts 实时获取数据

    html: <div id="realTimeInvoke" class="chart" style="height: 400px;" ...

  8. java连接Mysql8

    相较于之前版本会有部分改动 pom依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql- ...

  9. itoa函数实现

    1.      整数字符转化为字符串数 // 将整数转换成字符串数,不用函数itoa // 思路:采用加'0',然后在逆序的方法 #include <iostream> using nam ...

  10. 用PhoneGap创建第一个项目

    1.在eclipse中新建Android Project2.在项目的目录下,建两个文件夹:/libs/assets/www3.进入将刚刚下载并解压的PhoneGap包里Anroid目录,我们需要的资源 ...