分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

css不定高度实现垂直居中

发布时间:2023-09-06 01:46责任编辑:熊小新关键词:暂无标签
1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行:
parentElement{ ???????position:relative; ???} childElement{ ???????position: absolute; ???????top: 50%; ???????transform: translateY(-50%); }

2.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可

 ???parentElement{ ???????height:xxx; ???} ???.childElement { ?????position: relative; ?????top: 50%; ?????transform: translateY(-50%); ???}
不考虑兼容老式浏览器的话,用Flex布局简单直观一劳永逸:
parentElement{ ???display:flex;/*Flex布局*/ ???display: -webkit-flex; /* Safari */ ???align-items:center;/*指定垂直居中*/}



css不定高度实现垂直居中

原文地址:https://www.cnblogs.com/web-wjg/p/8615185.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved