- 水平居中
(1)内联元素
.center-children {
text-align: center;
}
(2)块级元素
.center-me {
margin: 0 auto;
}
(3)多个块级元素
第一种方法：我们将多个块级元素运用display：inline-block，转换为内联元素，然后运用text-align：center来处理。
<main class="inline-block-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
第二种方法：运用flex。
<main class="flex-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
.flex-center {
display: flex;
justify-content: center;
}
- 垂直居中
(1) 单行内联元素
第一种方法：上下设置相同的padding。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
第二种方法：运用行高, 注意是不能换行的。
.link {
height: 30px;
line-height: 30px;
white-space: nowrap;
}
(2) 多行内联元素
.parent-center {
display: flex;
justify-content: center;
flex-direction: column;
}
(3) 块级元素
情况一： 定高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
情况二：不定高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
情况三：运用flex
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
- 水平垂直居中
情况一：定高定宽
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
情况二：不定宽高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
情况三：运用flex
.parent {
display: flex;
//水平居中
justify-content: center;
//垂直居中
align-items: center;
}
情况四：运用grid
body, html {
height: 100%;
display: grid;
}
span {
margin: auto;
}
- 固定宽度布局
4.1 左右布局（两列布局）
html代码：
<div class="container clearfix">
<div class="left-box">左侧列</div>
<div class="right-box">右侧列</div>
</div>
CSS代码：
.left-box {
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.right-box {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
4.2 左中右布局（三列布局）
三列布局同两列布局的原理，使用float浮动。
html代码：
<div class="container clearfix">
<div class="left-box">左侧列</div>
<div class="mid-box">中间列</div>
<div class="right-box">右侧列</div>
</div>
CSS代码：
.left-box {
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.mid-box {
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.right-box {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
- 自适应布局
5.1左右布局（两列布局）
假设左侧列定宽，右侧列自适应。
(1) 自适应宽度运用calc计算。
CSS代码:
.left-box {
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.right-box {
float: left;
width: calc(100% - 100px);
height: 100px;
background-color: red;
}
(2)结合绝对定位
CSS代码：
.container {
position: relative;
height: 100px;
}
.left-box {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
}
.right-box {
margin-left: 100px;
height: 100px;
background-color: red;
}
5.2 左中右布局（三列布局，中间栏自适应）
(1) 使用float浮动
html代码：
<div class="container clearfix">
<div class="left-box">左侧列</div>
<div class="right-box">右侧列</div>
<div class="mid-box">中侧列</div>
</div>
CSS代码：
.container {
height: 100px；
}
.left-box {
float: left;
width: 300px;
height: 100%;
background-color: red;
}
.mid-box {
margin: 0 300px;
height: 100%;
background-color: green;
}
.right-box {
float: right;
width: 300px;
height: 100%;
background-color: blue;
}
注意：在html代码中，右侧列和中间列位置对换，如果不换，右侧列会换行。原因是：浮动的三栏布局（中间栏自适应）中，因为中间列是没有设置浮动定位，所以中间div没有脱离文档流，默认是block，块状元素会占满整行，导致右侧列是从下一行开始向右浮动。要使浮动的三列布局起效，要调整一下html的布局。
(2) 结合定位布局
html代码：
<div class="container clearfix">
<div class="left-box">左侧列</div>
<div class="right-box">右侧列</div>
<div class="mid-box">中侧列</div>
</div>
CSS代码：
.left-box {
position: absolute;
left: 0;
width: 300px;
height: 100%;
background-color: red;
}
.mid-box {
margin: 0 300px;
height: 100%;
background-color: green;
}
.right-box {
position: absolute;
right: 0;
width: 300px;
height: 100%;
background-color: blue;
}
