1. 介紹
上一篇講了Flex是Flexible Box的縮寫,意為"彈性布局"。任何一個容器都可以指定為Flex布局
注意,父元素設為Flex布局后,子元素的float、clear和vertical-align屬性都將失效
2. 相對定位+絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 300px;
height: 200px;
background-color: indianred;
/* 相對定位 */
position: relative;
}
#child {
width: 100px;
height: 100px;
background-color: gray;
/* 絕對定位 */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="box">
<div id="child">
</div>
</div>
</body>
</html>
父元素設置相對定位(relative),子元素設置絕對定位(absolute),margin:auto
3. flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 300px;
height: 200px;
background-color: indianred;
/* 設置flex */
display: flex;
/* 決定flex中項目的排列方向:column是列,default是row */
flex-direction: column;
/* 決定項目的對齊方式:center是居中 */
justify-content: center;
}
#child {
width: 100px;
height: 100px;
background-color: gray;
/* 繼承父元素align-items屬性,如果沒有,則等同於stretch。就是繼承父元素(id為box)的align-items */
align-self: center;
}
</style>
</head>
<body>
<div id="box">
<div id="child">
</div>
</div>
</body>
</html>
4. 相對定位+絕對定位+位移(transform)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 300px;
height: 200px;
background-color: indianred;
position: relative;
}
#child {
width: 100px;
height: 100px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div id="box">
<div id="child">
</div>
</div>
</body>
</html>
5. table布局(不推薦使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 300px;
height: 200px;
background-color: indianred;
padding: 100px;
display: table;
}
#child {
width: 100px;
height: 100px;
background-color: gray;
display: table-cell;
vertical-align: center;
}
</style>
</head>
<body>
<div id="box">
<div id="child">
</div>
</div>
</body>
</html>