css垂直居中

.parent{

  position: relative;

}

.child{

position: absolute;
top:50%;
transform: translateY(-50%);

}

1、定位 盒子宽高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局 父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时; (这里是本人常用方法)
position: relative / absolute;
/*top和left偏移各为50%*/
   top: 50%;
   left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 (至于何是3D加速 请看浏览器进程与线程篇)
4、flex 布局
父级: 
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
再加一种水平方向上居中 :margin-left : 50% ; transform: translateX(-50%);

 

转载于:https://www.cnblogs.com/zhoubingyan/p/8482978.html

### CSS实现元素垂直居中的方法 以下是几种常用的CSS技术来实现元素的垂直居中: #### 方法一:使用 `margin: auto` 当父容器具有固定的高度,并且子元素为块级元素时,可以通过设置子元素的上下外边距为自动 (`margin-top` 和 `margin-bottom`) 来实现垂直居中[^1]。 ```css .parent { position: relative; height: 200px; /* 父容器高度 */ } .child { position: absolute; top: 50%; transform: translateY(-50%); } ``` 这种方法适用于单个子元素的情况。 --- #### 方法二:利用行高属性 `line-height` 对于行内或行内块级元素,可以借助 `line-height` 属性使内容在父容器中垂直居中。此方法适合于单行文本或者已知高度的小型块状元素[^2]。 ```css .parent { height: 200px; /* 定义父容器高度 */ line-height: 200px; /* 设置行高等于容器高度 */ text-align: center; /* 可选:水平居中 */ } .child { display: inline-block; vertical-align: middle; line-height: normal; /* 防止继承父级的行高影响显示效果 */ } ``` 注意该方式仅限于单行文字或其他小型内容区域。 --- #### 方法三:Flexbox 布局 现代浏览器广泛支持 Flexbox 技术,它提供了强大的对齐功能,能够轻松完成复杂布局下的垂直居中操作[^3]。 ```css .parent { display: flex; align-items: center; /* 主轴方向上的居中 (默认为纵向) */ justify-content: center; /* 横向中心对齐可选 */ height: 200px; /* 设定任意合适的高度 */ } ``` 这种方式不仅简洁明了而且兼容性强,在响应式设计场景下尤为实用。 --- #### 方法四:伪元素配合 `vertical-align` 通过创建一个占据整个父容器高度的伪元素并将其与目标子节点一起设置成 `inline-block` 类型,则能依靠 `vertical-align:middle` 达到预期目的[^4]。 ```css .box { width: 400px; height: 400px; border: 1px solid red; text-align: center; } .box::before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; /* 占满父盒子高度 */ } .content { display: inline-block; vertical-align: middle; } ``` 这种技巧特别适合处理未知尺寸的内容块。 --- #### 方法五:Grid Layout 作为新一代布局方案之一,CSS Grid 提供了一种更加直观的方式来定义网格结构以及其中项目的位置关系。 ```css .container { display: grid; place-items: center; /* 同时实现了水平和垂直方向上的居中 */ height: 200px; /* 自定义大小 */ } ``` 上述代码片段展示了如何快速构建一个既满足视觉美感又易于维护的设计模式。 --- ### 总结 以上列举了几种主流的技术途径用于解决不同条件下的垂直居中难题。每一种都有其特定的应用场合及局限性,请根据实际需求选取最适合的方式加以运用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值