一、行内元素-水平居中

  在父元素的样式中添加: 

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. svn离线安装以及配置,管理python自动化脚本

    1.使用源码安装,自己make和install,难度还挺大的,改用对应iso中的rpm安装包来安装 2.iso中的rpm包安装,会存在rpm包之间的依赖的关系 3.这种依赖关系,可以处理,仍然在iso ...

  2. mysql从5.5直接升级到5.7后,执行mysql_upgrade速度很慢且执行结束后数据目录大小增加一倍及 mysqlpump备份出现1577错误

    mysql官网不支持夸大版本升级,比如跳过5.6直接升级到5.7,但由于一些客观原因,项目需要从5.5直接升级到5.7,以下是具体操作 1.备份之前mysql,(数据量少,可直接拷贝安装目录及data ...

  3. 学习使用PM2管理nodejs进程

    在项目中,偶尔对命令会忘记一下,所以在此记录下pm2的常用命令. 1. pm2是什么?pm2 是一个带有负载均衡的Node应用的进程管理器, 它能够管理Node应用,还能够对应用的运行状态进行监控. ...

  4. DataX

    #!/bin/bash[ ! -d /opop ] && mkdir /opopcd /opopwget http://192.168.1.129/package/DataX/{jdk ...

  5. idea 上传代码到 gitee

    https://www.2cto.com/net/201804/740238.html 这一步如果是个空仓库可以提交,如果是个已有的项目 Define remote 一下就可以了,不要提交代码

  6. Python通过pip方式安装第三方模块的两种方式

    一:环境 python3.6 windows 10 二:常用命令 如果直接执行pip命令报错,说明pip不在path环境变量中 解决方法: python -m pip list 以下默认可直接使用pi ...

  7. dfs实现数的全排列

    代码 #include<bits/stdc++.h> using namespace std; #define ll long long bool vis[15]; int a[15]; ...

  8. Applese 的毒气炸弹 G 牛客寒假算法基础集训营4(图论+最小生成树)

    链接:https://ac.nowcoder.com/acm/contest/330/G来源:牛客网 Applese 的毒气炸弹 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262 ...

  9. elasticsearch elk最全java api 搜索 聚合、嵌套查询

    目录 一. 一般查询... 2 (一) matchAllQuery(client). 2 (二) matchQuery(client);3 (三) multiMatchQuery(client);3 ...

  10. Redis缓存用起来

    Redis缓存用起来 1. 引言 创建任务时我们需要指定分配给谁,Demo中我们使用一个下拉列表用来显示当前系统的所有用户,以供用户选择.我们每创建一个任务时都要去数据库取一次用户列表,然后绑定到用户 ...