div垂直居中css3，怎么将div里面的div垂直居中

今天小编为大家分享Windows系统下载、Windows系统教程、windows相关应用程序的文章，希望能够帮助到大家！

一、position定位法

1.父容器div设置position:relative;

2.子容器div设置position:absolute;

3.子容器div定位 top:50%;

4.子容器div定位 left:50%;

5.子容器div定义负margin top:-子容器div宽度或者高度的一半；

6.子容器div定义负margin left:-子容器宽度或者高度的一半；

position定位法是利用父容器div和子容器div定位来实现div 垂直居中，需要设置定位，子容器div定义负margin来改变定位，此方法效果较好，实现难度也较大。

二、flex定位法

1.父容器div设置display:flex;

2.子容器div设置margin:auto;

3.子容器div设置margin-top：auto；

4.子容器div设置margin-bottom：auto；

flex定位法就是利用flex布局来实现div 垂直居中，只需要设置父容器和子容器的布局和margin即可实现，此方法实现简单。

三、table-cell定位法

1.父容器div设置display:table-cell;

2.子容器div设置margin:auto;

table-cell定位法是利用table单元格布局来实现div 垂直居中，只需要设置父容器和子容器的布局即可实现，此方法实现较为简单。

四、transform定位法

1.子容器div设置position:relative;

2.子容器div设置transform:translate(0,50%);

transform定位法就是利用transform属性来实现div 垂直居中，只需要设置子容器div相应的位置即可实现，此方法实现简单。

1. 使用 position 属性实现div 垂直居中：先将position属性值设为absolute或者relative，然后将top属性设置为50%，margin-top 设置为负值且与div 高度一致，即可实现div垂直居中；

2. 使用 transform 属性实现Div垂直居中：首先设置元素 position属性值为relative或absolute，然后将 transform 的 translateY 设置为负值的一半，公式为 translateY(-50%)，即可实现div垂直居中；

3. 使用 flex 布局实现div 垂直居中：在外层DIV 中设置display 属性为 flex，align-items 属性设置为center ，即可实现div 垂直居中；

4. 父元素容器采用 table-cell 布局法实现 div 垂直居中：将外层DIV 的 display设置为 table，将子元素 div 设置为 table-cell，然后将 vertical-align 属性设为 middle 即可实现div 垂直居中；

5. 父元素容器采用 line-height 法实现div 垂直居中：将外层DIV 中line-height属性值设为div 元素高度，即可实现div垂直居中。

wWw.Xtw.com.Cn系统网专业应用软件下载教程，免费windows10系统,win11,办公软件,OA办公系统,OA软件,办公自动化软件,开源系统,移动办公软件等信息，解决一体化的办公方案。