div垂直居中有几种

1、已知宽高

position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

2、宽高未知

方法一：position

#container{position:relative;
}#center{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

方法二：弹性盒子flex

#container{display:flex;justify-content:center;align-items: center;
}

方法三：translate()

.center {position: fixed;top: 50%;left: 50%;background-color: #000;width:50%;height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}

方法四：display: inline-block;


.parent-panel2:after{content:"";display: inline-block;vertical-align: middle;height: 100%;
}

css3不定宽高水平居中：

在父级元素加3句话，就可以实现子元素水平垂直居中。

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

@ cc

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 相 ...
HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
将div垂直居中放置在另一个div中[重复]
本文翻译自:Vertically centering a div inside another div [duplicate] This question already has answers he ...
如何将所有浏览器的div垂直居中？
我想用CSS将div垂直居中. 我不需要表或JavaScript,而只需要纯CSS. 我找到了一些解决方案,但是所有这些解决方案都缺少Internet Explorer 6支持. <body&g ...

div垂直居中有几种

div垂直居中有几种

div垂直居中有几种相关推荐

最新文章

热门文章