年轻？大有所为！——问题集二元素居中

最新推荐文章于 2018-11-14 01:03:32 发布

原创最新推荐文章于 2018-11-14 01:03:32 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

divcss 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了块级元素如何在父元素中居中，以及如何实现垂直居中。包括使用margin属性、绝对定位以及vertical-align属性等方法，并提供了实例代码和解释。

1. 块级元素居中

块级元素的宽度默认是父元素宽度。

以DIV为例，进行测试：

(1)div放在body中，设置了宽度和高度，背景颜色

html:

<!DOCTYPE html>
<html>
	<head>
		<title>测试ing</title>
		<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="test.css">
	</head>
	<body>
		<div id="center">
			div在父元素中居中
		</div>

	</body>
</html>

css:

div#center{
	width: 300px;
	height: 200px;
	background: #159;
}

(2)css中设置div其text-align: center;
结果显示，是DIV元素里面的内容在DIV中居中。

(3)那这样说，对于div本身这个元素，就想到盒模型啦

所以方法一：

水平居中：margin-left：auto；margin-right：auto；当然也可以写做margin：0 auto；

垂直居中：估量着margin-top：200px;

或者最开始就写：

margin：200px auto；

好啦，有人说用vertical-align: middle;不就垂直居中啦！可是你会发现没有效果！

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐（那么应该是vertical-align对行内元素有效，对块级元素无效吧）。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

即给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。

其值：

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

其使用：

1.用于内联元素
下面以图像的垂直对齐为例子说明一下vertical-align属性的用法。
img{ vertical-align:middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>

2.用于表格
vertical-align属性可以直接用于表格单元格，效果相当于HTML中的valign属性。
td{ height:40px; vertical-align:middle;}
<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</td></tr></table>

3.用于块元素
vertical-align属性是不适用于块元素的，这就是为什么有些人使用vertical-align属性无效的原因。但是我们可以使用display属性，设置其值为table-cell，将块元素转化为单元格，然后再使用vertical-align属性。
div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>
需要注意的是，上面这种方法是存在兼容性问题的。IE6/IE7以及以IE为核心的浏览器如世界之窗、360、遨游等浏览器不支持这种用法，而Chrome、火狐却能支持。
为了兼容ie6/7可以为div添加以下属性
div{
*display:block; *font-size:175px;/*高度为200px，则200*0.873约为175px* 撑开/ }

方法二：

用定位，算边距呗

div#center{
	width: 300px;
	height: 200px;
	background: #159;
	/*margin: 200px auto;******方法一*/
	position: absolute;
    left: 50%;/*是用的DIV的左边去定位的父元素的50%*/
    top: 50%;
    margin-left: -150px;/*所以左上都要宽高的一半*/
    margin-top: -100px;
}

2.如何让文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。

即line-height和height值相同。

其他可参考http://www.jbxue.com/article/8240.html，讲了块级和内联居中的问题。