1.水平居中
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;
2.垂直居中
父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}
3.左右布局
使盒子浮动，或者使用绝对定位等方法
浮动布局
这种方法是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果
image.png
4.左中右布局
1. float+margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#content{
height:300px;
}
.left{
width: 200px;
height:100%;
float: left;
background-color: #00a0dc;
}
.middle{
height:100%;
margin-left:200px;
margin-right: 300px;
background-color: red;
}
.right{
height:100%;
width: 300px;
float: right;
background-color: #00a0dc;
}
</style>
</head>
<body>
<div id="content">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>
注意：中间的middle元素是content的最后一个元素
2. float+absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#content{
position: relative;
width:100%;
height:300px;
}
.left{
float: left;
width: 200px;
height:100%;
background-color: #00a0dc;
}
.middle{
position: absolute;
top:0;
bottom:0;
left:200px;
right: 300px;
background-color: red;
}
.right{
float: right;
height:100%;
width: 300px;
background-color: #00a0dc;
}
</style>
</head>
<body>
<div id="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
3. display:box;box-flex:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#content{
height:300px;
display:-webkit-box;
}
.left{
width: 200px;
height:100%;
background-color: #00a0dc;
}
.middle{
min-width:200px;
-webkit-box-flex: 1;
height:100%;
background-color: red;
}
.right{
height:100%;
width: 300px;
background-color: #00a0dc;
}
</style>
</head>
<body>
<div id="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
4. display:flex;flex:1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#content {
display: flex;
width: 100%;
height: 200px;
}
#left {
flex:0 0 200px;
height: 100%;
background-color: #f04d0d;
}
#middle{
flex: 1;
background-color: blue;
}
#right {
flex:0 0 200px;
height: 100%;
background-color: #f04d0d;
}
</style>
</head>
<body>
<div id="content">
<div id="left"> </div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>
让一个元素绝对居中可以使用以下代码：
display: flex;
justify-content: center;
align-items: center;
网友评论