flex布局水平垂直居中水平垂直居中_生活百科

在写页面的时候，经常会遇到元素垂直居中的需求。有时候一连试了几种方法，并没有效果，那是因为你没有用对方法，每种垂直居中，都有不同的使用条件。下面我们来详细了解一下吧。
这里收集了八种不同的方法。
一、行高，line-height 。适用场景：单行文字垂直居中。
在一个块级元素中有一行字，想让文字垂直居中，便可以在块级元素上设置和元素高度一致的行高。如图所示<div>元素，添加行高后，文字的位置就从左边变成右边的，实现了垂直居中。
【flex布局水平垂直居中水平垂直居中】html
<div id="div">你好</div>css
#div{height:50px;line-height:50px; }

文章插图

文章插图
块元素居中
#div {display: table;}#block {display: table-cell;vertical-align: middle;}五、绝对定位+负边距法。适用场景：这种方法适用于块级元素，需要设置元素的高度。也就是设置子元素距离父元素顶部50%，然后通过margin把子元素向上移动自身高度的一半。
html
<div id="div"><div id="block">content</div></div>css
#div {position:relative;}#block {positopn:absolute;top: 50%;left: 50%;height: 30%;width: 40%;margin: -15% 0 0 -20%;}六、弹性盒子法。适用场景：都可以使用。
html
<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; // 定义主轴的对齐方式}七、绝对定位+margin:auto适用场景：块级元素垂直居中。
把要垂直居中的元素相对于父元素绝对定位，top和bottom设置为相等的值，我这里设置成0了。再将要居中的元素的margin设为auto，这样就可以实现垂直居中了。
html
<div id="div"><div id="block">content</div></div>css
#div {position:relative;}#block {positopn:absolute;top:0;bottom:0;margin:auto 0;}

八、padding 。适用场景：须知父元素的高度和子元素的高度。如果指定父元素高度为300px，子元素高度为100px，要实现垂直居中需要设置父元素的上下padding为100px 。
html
<div id="div"><div id="block">content</div></div>css
#div {padding: 100px 0;}

喜欢的话，欢迎点赞收藏！

flex布局水平垂直居中 水平垂直居中

flex布局水平垂直居中水平垂直居中