在编写页面时，我们经常会遇到元素垂直居中的要求。有时候你连续试了好几种方法，都没用。那是因为你没有用对方法。每种垂直对中有不同的使用条件。让我们仔细看看。
这里收集了八种不同的方法。
1.行高，行高。
适用场景:单行文本垂直居中。
块级元素中有一行字。如果希望文本垂直居中，可以在块级元素上设置与元素高度一致的行高。如图<>所示；元素，添加行高后，文本的位置从左向右变化，实现垂直居中。
超文本标记语言
<div id="div"> 你好</div>
钢性铸铁
#div{ height:50px; line-height:50px; }
第二，行高+垂直对齐。
适用场景:画面垂直居中。
<div id="div"> <img src="i***ge.png" id="img" /></div>
向父元素添加line-height，向图片元素添加vertical-align: middle。
#div { line-height: 200px;}#img { vertical-align: middle;}
第三，绝对定位+变换法。
适用场景:中间元素拉伸到一定高度时可以使用。
超文本标记语言
<div id="div"> <div id="block">content</div></div>
钢性铸铁
#div { position:relative;}#block { positopn:absolute; top:50%; transform: translateY(-50%)}
四。表格法。
适用场景:多行文本垂直居中，或者可以将block元素转换为inline元素。也可以使用。
vertical-align仅适用于表格单元格和行内元素，并且vertical-align的值相对于其父元素。如果你想把它用于一个块元素，我们可以把父元素转换成一个表，，这样我们就可以使用这个方法。
多行文本居中
// html<div id="div"> <span id="content">那是因为你没有用对方法，每种垂直居中，都有不同的使用条件。下面我们来详细了解一下吧。</span></div>// css#div{ display: table;}#span { display: table-cell; vertical-align: middle;}
块元素居中
#div { display: table;}#block { display: table-cell; vertical-align: middle;}
第五，绝对定位+负保证金法。
适用场景:该方法适用于块级元素，需要设置元素的高度。即设置子元素距离父元素顶部50%，然后通过***rgin将子元素向上移动其高度的一半。
超文本标记语言
<div id="div"> <div id="block">content</div></div>
钢性铸铁
#div { position:relative;}#block { positopn:absolute; top: 50%; left: 50%; height: 30%; width: 40%; ***rgin: -15% 0 0 -20%;}
六、弹性盒法。
适用场景:都可以。
超文本标记语言
<div id="div"> <div id="block">content</div></div>
有两种方法可以编写css:
// 方法一：#div { display:flex; align-item:column; }// 方法二：#div { display:flex; flex-direction:column; // 改变主轴方向 justify-content:center; // 定义主轴的对齐方式}
七。绝对定位+边距:自动
适用场景:块级元素垂直居中。
垂直居中的元素相对于父元素绝对定位，并且top和bottom设置为相等的值。我在这里将它们设置为0。将要居中的元素的边距设置为auto，以便可以实现垂直居中。
超文本标记语言
<div id="div"> <div id="block">content</div></div>
钢性铸铁
#div { position:relative;}#block { positopn:absolute; top:0; bottom:0; ***rgin:auto 0;}
八、垫料。
适用场景:注意父元素的高度和子元素的高度。如果指定父元素的高度为300px，子元素的高度为100px，为了实现垂直居中，需要将父元素的填充设置为100px。
超文本标记语言
<div id="div"> <div id="block">content</div></div>
钢性铸铁
#div { padding: 100px 0;}
本文来自少年我念你投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/487251.html
微信扫一扫 
