div垂直居中的几种方法

第一种

1. 父类
.father {height:100%; // height:100vh;width:100%;display:flex;background-color: red;
}
2. 子类
.child {height:40%;width:50%;margin:auto;background-color: blue;
}

第二种

1. 父类
.father {height: 100%;width: 100%;position: relative;background-color: #eee;}
2. 子类.child {height: 40%;width: 50%;position: absolute;left: 25%;top: 30%;right: 0%;background-color: #5FD6FF;}

第三种

.father {line-height: 200px;height: 200px;border: 3px solid green;text-align: center;
}.child {vertical-align: middle;display: inline;
}

第四种

1. 父类
#box {line-height: 500px;height:500px;width:100%;text-align: center;background-color: #eee;
}
2. 子类#shade {width: 200px;margin: auto;}

div垂直居中的几种方法相关推荐

div垂直居中的两种方法
div垂直居中的两种方法表格方法 /* 第一种方法,DIV垂直居中表格方法 */display: table-cell;/*设置成表格单元*/vertical-align:middle;/*垂直 ...
CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
CSS教程:div垂直居中的N种方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
让div垂直居中的5种方法
方法一: 这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性. HTML & CSS: 1 <div class=&q ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
多行文本垂直居中的三种方法
本篇是我整理的多行文本垂直居中的三种方法效果图如下图方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-alig ...
html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
div垂直居中有几种
div垂直居中有几种 1.已知宽高 position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-1 ...
CSS实现垂直居中的7种方法
CSS实现垂直居中的7种方法 1.设定行高(line-height) 2.设置伪元素::before 3.absolute + transform 4. 设置绝对定位 5.设置display:flex ...

div垂直居中的几种方法

第一种

第二种

第三种

第四种

div垂直居中的几种方法相关推荐

最新文章

热门文章