1.行内元素或行内块元素设置水平居中用 text-align
2.margin:0 auto; 是对于块元素而言
使用flex布局实现垂直居中
在父级元素中使用flex布局,里面的子元素就会垂直居中
<div class="a">
<div class="b"></div>
</div>
.a{
width: 200px;
height: 200px;
border: 1px solid blue;
display: flex;
align-items: center;
justify-content: center;
}
.b{
width: 100px;
height: 100px;
background: red;
}
内联元素(行内元素)
元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下才会换行,其宽度随元素内容的变化而变化。
<div class="hang">
<span>小威</span>
</div>
水平居中
直接给父级定义:text-align 即可实现文本水平居中
.hang{
background-color: #ccc;
width: 200px;
height: 200px;
text-align: center;
}
垂直居中
1.设置父级的行高=高度即可
line-height: 200px;
块元素
元素会独占一行
<div class="kuaiFu">
<div class="kuai"></div>
</div>
垂直居中
1. (父级高低–子级高度)/2==设置头部内边距,使用内边距时需使用box- sizing配合使用
2. 给子级设置:margin:0 auto;
.one{
background-color: #000; //设置背景
width: 600px;
height: 600px;
padding-top: 200px;
box-sizing: border-box;
}
.two{
background-color: #fff;
width: 200px;
height: 200px;
margin: 0 auto;
}
内敛块元素(行内块元素)
元素不会单独占一行,但是本身自带间隙
<div class="hangNeiKuaiFu">
<div class="hangNeiKuai"></div>
</div>
垂直居中
1. 让父级的行高=高度,然后设置 text-align
2. 子级设置成 vertical-align:middle 和父级的行高配合使用
.hangNeiKuaiFu{
background-color: red; //设置一个红色背景
width: 600px;
height: 600px;
text-align:center;
line-height: 600px;
}
.hangNeiKuai{
width: 200px;
height: 200px;
background-color: #fff;
display: inline-block;
vertical-align: middle;
}