div垂直水平居中经常使用的方法

通过定位：

　　父级元素：position: relative;

　　子元素：

　　　　　　 position: absolute;

　　　　　　top：50%；

　　　　　　left：50%；

　　　　　　transform: translate(-50%,-50%); // 在不确定自身的高度时

　　　　　　margin: -100px 0 0 -200px; // 确定自身的高度时，margin-top：负的自生高度一半；margin-left：负的自生宽度一半；

使用弹性盒子

　　父级元素：display: flex;

　　　　　　 align-items: center;

　　　　　　　justify-content: center;

使用 display: table-cell;

　　父级元素： display: table-cell;

　　　　　　　vertical-align: middle;

　　子元素：　margin：0 auto；

转载于:https://www.cnblogs.com/yehongrun/p/9639570.html

div垂直水平居中经常使用的方法相关推荐

使一个div垂直+水平居中的几种方法
前几天去一家互联网公司面试,面试官问到了这个应该算是比较简单的问题,在我自认为回答正确时,才知道这道题的答案有很多种,下面就让我们一起来探讨一下这个问题: 思路1:绝对定位居中(原始版) 这个是我回答 ...
H5+CSS3 实现div垂直水平居中的几种方式
实现div垂直水平居中的11种方法 <div class="father"><div class="son"></div> ...
CSS实现DIV垂直水平居中
CSS实现DIV垂直水平居中在页面设计中,很多地方都需要div的垂直水平居中,在前端开篇的学习中,也是使用较多的地方,所以我整理了三种方法帮助大家去解决问题,代码可直接使用,仅供参考学习. 方法方 ...
用css实现垂直水平居中的几种方法
1.用inline-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下. <!DOCTYPE html> <html lang="en& ...
前端元素垂直水平居中的多个方法
创建一个BFC,高度坍塌.居中.margin重合问题均可解决 1. 浮动元素float不为none 2. 绝对定位或固定定位:position:absolute/fixed 3. 行内元素:displ ...
如何让一个div垂直水平居中？
当然有很多种方法都可以实现这种效果,这里就简单说一种通过定位结合margin来实现的方法. 1.首先在body里面准备两个盒子(父盒子和子盒子) <body><div class=& ...
【CSS基础】实现 div 里的内容垂直水平居中
方案一: 所有内容垂直水平居中兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...
不定宽高的DIV，垂直水平居中
1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...
html/css笔记 table表格文本垂直水平居中对齐方法
简介: 平时工作中开发经常会遇到html网页样式设计,这里记录一下笔记方便后期查看,也顺便给其他人提供一个参考 HTML 文本垂直水平居中对齐方法(一):css样式水平居中 text-align 应 ...

div垂直水平居中经常使用的方法

div垂直水平居中经常使用的方法相关推荐

最新文章

热门文章