1.居中
1.1a居中
a居中
a居中
// 谁居中给谁
line-height text-align: center;
1.2万能居中
万能居中
父元素要使用 position: relative;对子元素要使用 position: absolute;
position: absolute;
top: 0;
left: 0;
right: 0
bottom: 0;
margin: auto;
使用定位position: absolute; top:...; right: ...; bottom: ...; left: ...; 四个方向上的值缺一不可。
1.3浏览器计算居中
浏览器计算居中
<div class="parent-box">
<div class="child-box">让浏览器计算子元素的宽高并让其水平垂直居中</div>
</div>
.parent-box {
position: relative;
width: 200px;
height: 200px;
background-color: #f00;
}
.child-box {
position: absolute;
top: 20%;
right: 20%;
bottom: 20%;
left: 20%;
background-color: #f54;
}
1.4文本居中
有边框的情况下，ling-height为高度减去边框的2倍
多行文本居中，height/多少行
1.5实现图片与文本垂直居中对齐
行内元素vertical-align: middle
1.6自适应居中
定盒子最外层宽度，内层text-align，line-height，margin
1.7浮动元素居中
浮动元素居中
我的文集
点击我的头像，查看右方我的文集，查看文章集合
