软件下载

html怎么居中(垂直居中方法大全)

软件下载 投稿 2022-05-31 11:29:03 浏览

在写页面的时候,经常会遇到元素垂直居中的需求。有时候一连试了几种方法,并没有效果,那是因为你没有用对方法,每种垂直居中,都有不同的使用条件。下面我们来详细了解一下吧。

这里收集了八种不同的方法。

一、行高,line-height。

适用场景:单行文字垂直居中。

在一个块级元素中有一行字,想让文字垂直居中,便可以在块级元素上设置和元素高度一致的行高。如图所示<div>元素,添加行高后,文字的位置就从左边变成右边的,实现了垂直居中。

html

<div id="div"> 
  你好
</div>

css

#div{
  height:50px;
  line-height:50px; 
}
垂直居中方法大全

 

二、line-height + vertical-align。

适用场景:图片垂直居中

<div id="div">
    <img src="image.png" id="img" />
</div>
垂直居中方法大全

 

给父元素添加line-height,给图片元素加上vertical-align: middle。

#div { 
    line-height: 200px;
}
#img {
    vertical-align: middle;
}
垂直居中方法大全

 

三、绝对定位+transform法。

适用场景:居中元素能被撑开有高度即可使用

html

<div id="div">
    <div id="block">content</div>
</div>

css

#div {
    position:relative;
}
#block {
  positopn:absolute;
  top:50%;
  transform: translateY(-50%)
}

四、表格法。

适用场景:多行文字垂直居中,或者将块元素转成行内元素也可使用

vertical-align 只对 table-cell 以及 inline-element 起作用,vertical-align 的值是相对于其父元素的,父元素必须是行内元素。如果想用于块元素,我们可以将父元素转化为table,这样就能使用此方法

多行文字居中

// 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%,然后通过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;
}

「真诚赞赏,手留余香」

求资源网

真诚赞赏,手留余香

使用微信扫描二维码完成支付

继续浏览有关html的文章
发表评论
留言与评论(共有 0 条评论)
   
验证码:
版权声明

求资源网所发布的一切破解补丁,软件,以及其他分析文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途。
否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。