CSS居中对齐、定位的总结

1.css水平,垂直居中的写法(1)水平居中行内元素text-align:center块级元素margin:auto(2)垂直居中当height和line-height:height两个属性设置相同高度时,该元素内部文字会居中。line-height:height;padding:将顶部和底部设置同样的高度,也会居中padding-top:20px;padding-bottom:20px;margin:让div居中对齐margin-left: auto;margin-ri
摘要由CSDN通过智能技术生成

1.css水平,垂直居中的写法

(1)水平居中

行内元素

text-align:center

块级元素

margin:auto
(2)垂直居中

当height和line-height:height两个属性设置相同高度时,该元素内部文字会居中。

line-height:height;

padding:将顶部和底部设置同样的高度,也会居中

padding-top:20px;
padding-bottom:20px;

margin:让div居中对齐

margin-left: auto;
margin-right: auto;

除了使用line-heightpadding、margin外,我们还可以使用 transform 属性来设置垂直居中

transform: translate(-50%, -50%);

2.position定位

position 属性指定了元素的定位类型。
共有以下五种,常用的是(1),(2),(3)

(1)relative定位,相对定位元素的定位是相对其正常位置。
position:relative;
(2)absolute定位,绝对定位的元素的位置相对于最近的已定位父元素
position:absolute;
(3)fixed 定位,元素的位置相对于浏览器窗口是固定位置。
position:fixed;
(4)sticky 定位,可以把它称之为粘性定位
position: sticky;
(5)static定位,静态定位的元素不会受到 top, bottom, left, right影响
position: static;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值