css3实现水平垂直居中------(特别注意,里边的固定还是不固定)
css3 实现 还是 注意 水平 ------ 固定 居中
2023-09-11 14:15:29 时间
a,----定位方式(父元素宽高固定,子元素宽高固定)
<div class="Father"> <div class="children"></div> </div> <style lang="scss" scoped> .Father{ position: relative; } .children{ width: 50px; height: 50px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; } </style>
b, ----flex布局方式(父元素宽高不固定,子元素宽高不固定)
<div class="Father"> <div class="children"></div> </div> <style lang="scss" scoped> .Father { border: 1px solid red; height: 100px; display: flex; justify-content: center; align-items: center; } .children { width: 50px; height: 50px; border: 1px solid blue; } </style>
c, ----transform方式(父元素宽高不固定,子元素宽高不固定)
<div class="Father"> <div class="children"></div> </div> <style lang="scss" scoped> .Father { border: 1px solid red; height: 100px; position: relative; } .children { width: 50px; height: 50px; border: 1px solid blue; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */ } </style>
.
相关文章
- CSS3 动画实现方法大全(*****************************星级文章*************************)
- HTML5 & CSS3 内容收集(1)
- 【原】[webkit移动开发笔记]之CSS3径向渐变
- 【原】移动web动画设计的一点心得——css3实现跑步
- CSS3魔法堂:认识@font-face和Font Icon
- css3边角旋转
- 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果
- [CSS3] Interactive Pseudo-Classes :link :visited :hover :active
- [CSS3] CSS Selector
- [CSS3] CSS Background Images
- CSS3圆角详解
- CSS3 实现 60 FPS (60帧)动画效果
- 【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
- CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
- css3 翻转和旋转的差别