如何垂直居中元素（浮動元素&居中一個<img>）？
1.如何居中一個浮動元素？
方法一：已知元素的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 方法一：已知元素的高寬*/
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; /* 父元素需要相對定位,子元素絕對定位 */
top: 50%;
left: 50%;
margin-top:-100px ; /* 二分之一的height，width */
margin-left: -100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>方法二：
<!DOCTYPE html>
<html lang="en">
<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;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>這些方法也是在網上看網友的經驗,以後可能用的著
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素在父元素裏面垂直居中</title>
<link rel="stylesheet" type="text/css" href=""/>
<style>
#d1{
border:thin solid red;
width:900px;
height:100px;
display:table-cell;
vertical-align:middle;
}
#d2{/*dashed也是虛線*/
border:thin dotted blue;
width:50px;
height:50px;
float:right;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
浮動元素既垂直又水平居中的方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素在父元素裏面垂直居中</title>
<link rel="stylesheet" type="text/css" href=""/>
<style>
#d1{
border:thin solid red;
width:900px;
height:100px;
display:table-cell;
vertical-align:middle;
margin:0 auto;
}
#d2{/*dashed也是虛線*/
border:thin dotted blue;
width:50px;
height:50px;
float:right;
}
/* 浮動元素水平居中
二種方法 1、父級div設置固定寬度後
加margin:0 auto; 然後子級div加浮動，
即可實現；不過此方法不能無限伸展；
2、在table內插入div，div設置浮動，
在table上設置margin:0 auto; 而table不
要設置寬度，因為table默認是寬度最小化的，實現居中的
*/
#d3{/*讓浮動元素水平居中的方法1*/
width:50px;
margin:0 auto;
}
table{/*讓浮動元素水平居中的方法2*/
margin:0 auto;
}
</style>
</head>
<body>
<div id="d1">
<!-- <div id="d3"><div id="d2"></div></div> -->
<table>
<tr>
<td><div id="d2"></div></td>
</tr>
</table>
</div>
</body>
</html>
2.如何居中一個<img>?
/* <img>的容器設置如下 */
#container{
display:table-cell;
text-align:center;
vertical-align:middle;
}
如何垂直居中元素（浮動元素&居中一個<img>）？