一,relative、absolute 的区别
我们还是来说常见的地方。首先就是relative
,absolute
的区别:
-
relative
是依据自身来定位的 -
absolute
则是依据离其最近一层的定位元素来定位的。最近一层,指的就是包裹着它的最近的一层父元素或以上层级。如果没有定位元素,那么就依据body
来定位
二,水平居中
我们来按照元素的种类来区分:
- inline 元素:设置
text-align: center
即可 - block 元素:设置
margin: auto
即可 - absolute 元素:设置
left:50%;margin-left: -width的一半
三,垂直居中(在水平居中的基础上)
- inline 元素:设置
line-height: height
- absolute 元素:
- 如果知道尺寸:设置
top: 50%;margin-top: -height的一半
(left: 50%;
的基础上) - 如果不知道尺寸:设置
transform:translate(-50%,-50%)
或者top,left,right,bottom都设置为0,然后margin: auto
- 如果知道尺寸:设置
四,其他居中方式
1,flex 布局
/*css*/
.container{
display: flex;
justify-content: center;
align-items: center;
}
/*html*/
<div class="container">
<div class="row">我是居中</div>
</div>>
其他定位有关的问题,我会在此做出补充