css中关于居中的那点事儿
css中关于居中的那点事儿
关于居中，无论是水平居中，还是垂直居中都有很多方式，下面我来介绍一些常用的。
第一部分：水平居中
1.实现行内元素的居中。方法：在行内元素外面的块元素的样式中添加：text-align:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{text-align: center;}
img{width: 200px;height: 200px;border: thin solid red;}
</style>
</head>
<body>
<div>
<img src="pic.png">
</div>
</body>
</html>
注意：对于某个块元素的居中，不能在其父元素的样式中设置text-align:center，这是无效的。下面介绍块元素的居中方式。
2.实现块级元素的水平居中。
方法一：设置其左右两边的外补丁为auto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 200px;height: 100px;background: red;margin:0 auto;}
</style>
</head>
<body>
<div>this is a div</div>
</body>
</html>
注意：如果块级元素是body的直接子元素，不设置宽，则默认100%，看不出效果；不设置高，且div中没有内容，则高度默认为0。因此，一定要同时设置块级元素的宽和高，这样才能看出来效果。对于在一个div中的另一个div希望居中，也可以使用这个方式，因为这时的margin是相对于其父元素而言的。
方法二：使用绝对定位和负边距。
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
#son{
width: 100px;height: 100px;background: #aaa;text-align: center;
position: absolute; left: 50%; margin-left: -50px;
/*注意：因为绝对定位是left的值是相对于son的最左边为50%，所以需要使用margin-left再向左偏移宽度的一半 */
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
效果图如下：
第二部分：垂直居中
1.行内元素的垂直居中
A 我们在写导航菜单时，往往采用将<a>标签写入float的<li>中，且为了美观，我们常常需要将a标签中的内容水平居中和垂直居中。水平居中我们在上面已经介绍了，通过在字体的父元素内设置text-align:center;即可实现。那么垂直居中呢？对于文字而言，我们只需要将行高设置为字体所在块元素的高度即可。
html代码如下：
<body>
<ul>
<li><a href="">我</a></li>
<li><a href="">是</a></li>
<li><a href="">导</a></li>
<li><a href="">航</a></li>
<li><a href="">的</a></li>
</ul>
</body>
css代码如下：
<style>
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
ul li{float: left;/*width: 40px;height: 40px;*/}
a{display: block;width: 70px;height: 40px;background: #daa541;border:1px solid red;text-align: center;line-height: 40px;}
</style>
我把a标签的display属性值修改为了block，所以我们就可以修改a标签的宽度和高度了，因为li是包含a的，li会由其中的内容（即a标签）撑开，所以在li中的width和height是不需要设置的。
因为a成为了块级元素，所以水平居中只需要在a中添加text-decoration:none;即可。将line-height的高度和height的高度设置为相同的，就可以实现垂直居中了。
B 如果要对a标签中的字体居中，实际上还有一种更为简单的方法。
即将a的display属性设置位block之后，不设置其宽度和高度（li的宽度和高度也不设置），为了看清楚，我们可以给a加border，这时得到的效果图如下：
即a的大小完全是由字体撑开的，这时我们可以通过设置上下左右的padding值达到与A方法相同的效果。html代码与A中相同，css代码如下：
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
ul li{float: left;}
a{display: block;background: #daa541;border:1px solid red; padding:10px 30px;}
大家可以看到，这里我只设置了上下padding值为10px，左右padding值为30px;在A中的width height text-align(实现水平居中) line-height(实现竖直居中)这些属性全都没有设置，只使用了padding:10px 30px;来代替，所以这种方法是值得推荐的。
效果图如下：
C 另外一种方法也可以实现行内元素的垂直居中。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; display:table-cell; vertical-align: middle;}
</style>
</head>
<body>
<div id="parent">
<span>faas</span>
</div>
</body>
</html>
即我们将id为parent的div元素的display属性值设置位table-cell，这时，即让标签元素以表格单元格的形式呈现，类似于td标签。这时就可以通过设置vertical-align来实现垂直居中了。但值得注意的是：table-cell会被其他一些css属性破坏，比如float和position:absolute等等。且一旦设置位table-cell，这时margin就不能用了。这种方法也可以用于块级元素的垂直居中。
2.块级元素的垂直居中。
方法一：使用绝对定位和负边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
#son{
width: 100px;height: 100px;background: #aaa;text-align: center;
position: absolute;top: 50%;margin-top: -50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
方法二：使用display：table-cell;方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; display:table-cell; vertical-align: middle;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
大家可以看出，这个方法与行内元素的垂直居中并没有什么区别。
方法三：使用display:flex;代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
display: flex; align-items:center; }
#parent>div{background: red;width: 100px;height: 100px;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
在父元素中添加display:flex;align-items:center;即可实现竖直居中。
3.使用line-height居中。
即给父元素（块级元素）设置height和line-height相等，然后给子元素（inline-block 或者 inline元素) 设置vertical-align:middle即可，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>forMiddle</title>
<style>
div{
width: 500px;
height: 500px;
line-height: 500px;
background-color: #ddd;
}
a{
vertical-align: middle;
color:red;
}
</style>
</head>
<body>
<div>
<a href="">居中</a>
</div>
</body>
</html>
又如下所示：
<!DOCTYPE html>
<html>
<head>
<title>forMiddle</title>
<style>
div{
width: 500px;
height: 500px;
line-height: 500px;
background-color: #ddd;
}
img{
vertical-align: middle;
color:red;
}
</style>
</head>
<body>
<div>
<img src="http://p0.so.qhmsg.com/bdr/_240_/t018cfb77d38a88e67f.jpg" alt="">
</div>
</body>
</html>
这种方式是非常值得学习了。
第三部分：水平竖直同时居中
方法一：使用绝对定位和负边距
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
#son{
width: 100px;height: 100px;background: #aaa;text-align: center;
position: absolute;top: 50%;margin-top: -50px; left: 50%;margin-left: -50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
效果如下：
方法二：使用display：flex。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
display: flex; align-items:center; justify-content:center;}
#parent>div{background: red;width: 100px;height: 100px;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
即只需要在父元素的样式中添加display：flex；align-items:center实现竖直居中，justify-content:center;实现水平居中。
方法三：同样使用display:flex.
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
display: flex; }
#parent>div{background: red;width: 100px;height: 100px; margin: auto;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
我们发现只需要在父元素中设置display:flex;在子元素中设置margin：auto；即可实现居中，这种方法无疑是最简单的。
css中关于居中的那点事儿的更多相关文章
- css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结 第一种,在固定布局中比较常用的技巧设置container的margin:0 auto: 第二种(从布局中入手) css .outer{ height:200 ...
- css中的居中问题
前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
- CSS中各种居中的问题
1.元素水平居中 1.1 在父元素上使用text-align: center; father { text-align: center; } 1.2 margin: 0 auto; 在上一个问题中,我 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
随机推荐
- UTF-8和Unicode
What's the difference between unicode and utf8? up vote 103 down vote favorite 49 Is it true that un ...
- myeclipse 连接svn服务器验证位置时发生错误 404 forbidden
来源于:https://my.oschina.net/softwarechina/blog/220300 网上有文章说是C:\Users\thinkpad\AppData\Roaming\Subver ...
- zabbix 微信报警
http://blog.csdn.net/wh211212/article/details/52735236 Zabbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式,但是越来越 ...
- Linux_Shell_grep
grep [选项] "搜索内容" 文件名 选项列表: -i 忽略大小写 -n 输出行号 -v 反向查找 --color=auto 搜索出的关键字用颜色显示 ll|g ...
- 强联通 HDU 2767 3836
n个点m条边 最少需要几条边变成强连通图 设有a个结点的入读为0, b个结点的出度为0, 则 max{a, b}就是答案. 注意特殊情况: 当原图已经强连通时, 答案是0而不是1. 加一条边少一个入度 ...
- <UL>中<li>标签前编号图片的简单调用
<style type="text/css"> ul li{ list-style-type:none} .men ul{ background:url(http:// ...
- Ext-ajax请求数据
Ext.Ajax.request({ url: webPath+'/news/newsEastmoneyList', method: 'POST', success: function (respon ...
- JS 打印功能代码可实现打印预览、打印设置等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- iOS 硬件授权检测：定位服务、通讯录、日历、提醒事项、照片、蓝牙共享、麦克风、相机等(转)
转载自:http://www.cocoachina.com/ios/20151214/14502.html iOS系统版本的不断升级的前提,伴随着用户使用设备的安全性提升,iOS系统对于App需要使用 ...
- hdfs创建级联文件夹
一个文件夹 hdfs dfs -mkdir /out /一定要有 级联 hdfs dfs -mkdir -p /out/ags 需要家-p