本文由 千趣源码 – qianqu 发布，转载请注明出处，如有问题请联系我们！div中的内容垂直居中-内容垂直居中的五种方法
写一页的情况下，大家时常会碰到原素垂直居中的规定。有时连续试着了几类方式，但也没有实际效果。那是由于你没有用对方式，每一个1446;直核心有不一样的运用标准。使我们细心看一下。
这里有八种不一样的方式。
1.行高，行高。
可用情景:单行文本垂直居中。
块级元素中有一行字。假如5201;将文本垂直居中，能够将行高设定为与块级元素上的原素高度一致。如图所示，提升行高后，文本的选址从从左往右转变，进而完成垂直居中。
htmL文件编译语言
您好钢度生铁
#div{ height:50px; line-height:50px; }
第二，行高 竖直两端对齐。可用情景:照片垂直居中。
给父原素加上line-height,给照片原素再加上vertical-align: middle。给父原素加上行高，给照片原素加上竖直两端对齐:垂直居中。
#div { line-height: 200px;}#img { vertical-align: middle;}
三，绝对定位 转换法。可用情景:核心原素能够拉申到一定相对高度，能够应用。
HTML文件编译语言
content钢度生铁
#div { position:relative;}#block { positopn:absolute; top:50%; transform: translateY(-50%)}第四，报表法。
可用情景:多行文本垂直居中，或是块原素能够变换为内联元素。
竖直两端对齐仅适用报表表格中和内联元素。竖直两端对齐的值是对应于父亲原素的，而且父原素务必是内联元素。如果我们想将它用以块原素，我们可以将父原素变换为表，那样人们就可以应用这一方式。
多行文本垂直居中。
// html 那是由于你没有用对方式，每一种垂直居中，都是有不一样的运用标准。下边咱们来具体了解一下吧。// css#div{ display: table;}#span { display: table-cell; vertical-align: middle;}
块原素垂直居中。#div { display: table;}#block { display: table-cell; vertical-align: middle;}形容词 （verb的简称）绝对定位 负边距法。
情景:此方案适用块级元素，必须设定原素的相对高度。换句话说，将子原素设定为离父原素顶端50%，随后根据行高将子原素往上挪动其本身相对高度的一半。
HTML文件编译语言
content钢度生铁
#div { position:relative;}#block { positopn:absolute; top: 50%; left: 50%; height: 30%; width: 40%; margin: -15% 0 0 -20%;}连系动词弹性盒法。
可用情景:二者皆可。
HTML文件编译语言
content撰写css有这两种方式:
// 方式一：#div { display:flex; align-ITEM:column; }// 方式二：#div { display:flex; flex-direction:column; // 更改主轴轴承方位 justify-content:center; // 界定主轴轴承的填充方法}七，绝对定位 担保金:全自动。
可用情景:块级元素垂直居中。
要垂直居中的原素相对性于父原素绝对定位。顶端和底端被配置为相同的值，我在这将他们设定为0。即将垂直居中的原素的行高设定为全自动，便于它能够垂直居中。
HTML文件编译语言
content钢度生铁
#div { position:relative;}#block { positopn:absolute; top:0; bottom:0; margin:auto 0;}八，添充。
可用情景:了解父原素的相对高度跟子原素的相对高度。假如特定父原素的相对高度为300px，子原素的相对高度为100px，则必须将父原素的添充设定为100px，以完成垂直居中。
HTML文件编译语言
content钢度生铁
#div { padding: 100px 0;}
