三行代码实现div内元素垂直居中
来源：互联网 发布：淘宝无线端视频要求 编辑：程序博客网 时间：2024/05/17 23:09
在前端编写中，经常会遇到div内部元素需要居中效果，主要实现方式为：
1.水平居中：margin: 0 auto;
2.垂直居中，
position: relative;
top: 50%;
transform: translateY(-50%);
Demo如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.div1 {border: 1px solid red;height: 200px;width: 200px;}.div2 {border: 1px solid green;height: 100px;width: 100px;margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);}</style></head><body><div class="div1"><div class="div2"></div></div></body></html>（1）未设置Position:relative之前，内部的元素贴在外部元素的顶端。
（2）设置了相对定位，并位移父容器的50%的高度。即向下平移50%。
（3）设置向上位移50%自身高度，完成居中效果。
0 0
- 三行代码实现div内元素垂直居中
- 实现DIV内文字垂直居中
- div内的元素垂直居中css样式
- div内文字垂直居中
- css实现div内图片的垂直、水平居中
- 实现DIV层内的文字垂直居中
- 实现DIV层内的文字垂直居中
- 实现DIV层内的文字垂直居中
- 实现不定宽高div内图片的垂直居中
- 实现DIV层内的文字垂直居中
- 实现DIV层内的文字垂直居中
- 实现DIV层内的文字垂直居中
- 三行实现垂直居中（用于多行文字）
- div内文字和控件垂直居中
- div内图文垂直居中对齐
- 设置DIV内图片垂直居中
- span在div内垂直居中
- img在div内水平垂直居中
- 编程不过是文字游戏
- leetcode刷题，总结，记录，备忘 101
- （4.1.2.6）Android 判断app是否在前台还是在后台运行
- Java序列化
- bzoj2594水管局长数据加强版题解
- 三行代码实现div内元素垂直居中
- java设计模式之五 —— 单例模式的三种模式优缺点整理
- css控制UL LI 的样式详解(推荐)
- Service_生命周期
- 技能树
- block没那么难（一）
- Appium for java API
- ThinkPHP中实例化对象M()和D()的区别
- perl核心模块解析（一）POSIX
