CSS 如何垂直居中元素？浮动元素&图片
1.如何居中一个浮动元素？
方法一：已知元素的高度
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>居中1</title>
<style>
/* 方法一：已知元素的高宽*/
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; /* 父元素需要相对定位,子元素绝对定位 */
top: 50%;
left: 50%;
margin-top:-100px ; /* 二分之一的height，width */
margin-left: -100px;
float：left;
}
</style>
</head>
<body>
<div ></div>
</body>
</html>方法二：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>居中2</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; /* 父元素需要相对定位,子元素绝对定位 */
left: 0;
top: 0;
right: 0;
bottom: 0;
float:left;
}
</style>
</head>
<body>
<div ></div>
</body>
</html>2.如何居中一个图片
/*图片的容器设置如下 */
#container{
display:table-cell;
text-align:center;
vertical-align:middle;
}- 上一篇 »css3实现水平、垂直居中
- 下一篇 »css清除浮动的3种方式