1、使行内元素
水平居中
text-align : center
垂直居中
line-height : 容器的高度，如果有 n 行文本，则使用 height / n
2、块元素水平居中
margin : 0 auto; 注意它只对块元素有效，行内块虽有宽高，但也需要转为块元素才能生效
３、垂直居中
1、
vertical-align : middle; 需要注意的是，它只对于inline 和 inline-block 以及设置了table-cell （例如td）的元素。
2、
、父元素不设置高度，利用padding-top == padding-bottom
4、水平和垂直都居中 (即行内块元素水平垂直居中的方式)
- 1、使用定位
- 2、使用 display : table
- 3、使用弹性布局： display : flex
- 4、使用transform : translate() 和定位实现
1、使用定位实现水平垂直居中
html代码
<div class="outer">
<div class="inner"></div>
</div>
CSS代码
.outer{
width: 600px;
height: 600px;
background: #f00;
margin: 0 auto;
position: relative;
}
.inner{
width: 200px;
height: 200px;
background: #00f;
position: absolute;
left: 50%;
margin-top: -100px; /*自身高度的一半*/
margin-left: -100px; /* 自身宽度的一半*/
top: 50%;
}
2、使用 display : table属性实现水平垂直居中
html代码
<div class="outer">
<div class="inner">
</div>
</div>
CSS代码
.outer{
width: 600px;
height: 600px;
background: #f00;
/*将父元素设置 display : table-cell; 并搭配 vertical-align:middle;*/
display: table-cell;
vertical-align: middle;
}
.inner{
width: 200px;
height: 200px;
background: #00f;
margin: 0 auto;
}
3、使用弹性布局实现
html代码
<div class="outer">
<div class="inner">
</div>
</div>
CSS代码
.outer{
width: 600px;
height: 600px;
background: #f00;
display: flex;
/*设置主轴方向（默认为水平）居中*/
justify-content:center;
/*设置交叉轴方向（与主轴垂直）居中*/
align-items: center;
}
.inner{
width: 200px;
height: 200px;
background: #00f;
}
4、使用transform 变换和定位实现居中
html代码
<div class="outer">
<div class="inner">
</div>
</div>
CSS代码
.outer{
width: 600px;
height: 600px;
background: #f00;
position: relative;
}
.inner{
width: 200px;
height: 200px;
background: #00f;
position: absolute;
left: 50%;
top:50%;
/*这里需要注意的是，translate移动的是自身宽高的 百分比*/
transform: translate(-50%,-50%);
}
