垂直居中或者水平居中的方法积累

本文详细介绍网页布局中的核心技巧,包括水平居中与垂直居中的多种方法,如使用文本属性、定位技术、Flexbox布局等,并提供了具体的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是垂直居中的基础内容:

水平居中:

    文本居中有:text-align:center;

   已知宽度的块级元素:margin:0 auto;

   表格居中:display:table;

     已知宽度,用子绝父相:父:position:relative; 子:position:absolute;left:50%;width:150px;margin-left:-75px;

   未知宽度:父:position:relative; 子:position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%;

垂直居中:

    文本垂直居中:line-height:(父元素的高度)

    vertial-align:middle;

    定位的方法:父:position:relative; 子:position:absolute;top:50%;height:150px;margin-top:-75px;

垂直水平居中:

    1.未知高度的情况下利用inline-block和vertical-align

    2.在高度宽度已知的情况下,用绝对定位实现垂直水平居中

   3.在高度宽度未知的情况下, transform: translate(-50%,-50%);

    4.在高度宽度未知的情况下,display: flex;justify-content: center;align-items: center;注意兼容性。


  

    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值