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 {
300px;
height: 200px;
background-color: indianred;
/* 相对定位 */
position: relative;
}
#child {
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 {
300px;
height: 200px;
background-color: indianred;
/* 设置flex */
display: flex;
/* 决定flex中项目的排列方向:column是列,default是row */
flex-direction: column;
/* 决定项目的对齐方式:center是居中 */
justify-content: center;
}
#child {
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 {
300px;
height: 200px;
background-color: indianred;
position: relative;
}
#child {
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 {
300px;
height: 200px;
background-color: indianred;
padding: 100px;
display: table;
}
#child {
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>