css实现居中的五中方法 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css实现的五种居中的方法</title>
	<style>
		.inner {
			height: 300px;
			width: 1200px;
			position: absolute;//
			top: 50%;//
			left: 50%;//
			transform: translate(-50%,-50%);//
			background-color: #888;
			text-align: center;
			line-height: 300px;
		}
		#wrapper {
			display: table;
		}
		#cell {
			display: table-cell;
			vertical-align: middle;
		}
	</style>
</head>
<body>
<!-- 参考网址：https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/
1：.inner{
position : absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}

2：
#wrapper {
    display: table;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}
3：
这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。
#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* negative half of the height */
}
4：
这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
#content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}
5：
这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
#content {
    height: 100px;
    line-height: 100px;
}
6：这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。 
content 清除浮动，并显示在中间。

#floater {
    float: left;
    height: 50%;
    margin-bottom: -120px;
}

#content {
    clear: both;
    height: 240px;
    position: relative;
}
 -->
	<!-- <div class="inner">方法一</div> -->
	<div id="wrapper"></div>
	<div id="cell"></div>
</body>
</html>

　　

posted @ 2016-04-11 22:56  HandsomeHan  阅读(209)  评论(0)    收藏  举报