高防服务器

css水平垂直居中的方式有哪些


css水平垂直居中的方式有哪些

发布时间:2022-03-08 18:35:08 来源:高防服务器网 阅读:90 作者:iii 栏目:web开发

这篇文章主要讲解了“css水平垂直居中的方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css水平垂直居中的方式有哪些”吧!

如无特殊说明,以下示例html均为:

<div class="md-warp">  	<span class="md-main"></span>  </div>

基础样式为:

.md-warp{  	width: 400px;  	height: 300px;  	max-width: 100%;  	border: 1px solid #000;  }  .md-main{  	display: block;  	width: 100px;  	height: 100px;  	background: #f00;  }

水平居中

margin法

需要满足三个条件:

  • 元素定宽

  • 元素为块级元素或行内元素设置display:block

  • 元素的margin-left和margin-right都必须设置为auto

三个条件缺一不可。

demo

.md-main{  	margin: 0 auto;  }

定位法

需要满足三个条件:

  • 元素定宽

  • 元素绝对定位,并设置left:50%

  • 元素负左边距margin-left为宽度的一半

demo1

.md-warp{  	position: relative;  }  .md-main{  	position: absolute;  	left: 50%;  	margin-left: -50px;  }

有些时候我们的元素宽度可能不是固定的,不用担心,我们依然可以使用定位法实现水平居中,此时需要用到css3中的transform属性中的translate,可以使元素移动时相对于自身的宽度和高度。

需要注意,这种方法需要IE9+才可以实现。

demo2

.md-warp{  	position: relative;  }  // 注意此时md-main不设置width为100px  .md-main{  	position: absolute;  	left: 50%;  	-webkit-transform: translate(-50%,0);  	-ms-transform: translate(-50%,0);  	-o-transform: translate(-50%,0);  	transform: translate(-50%,0);  }

文字水平居中

对于单行文字来说,直接使用text-align: center即可。

多行文字可以看作一个块级元素参考margin法和定位法。

垂直居中

定位法

和水平居中类似,只是把left:50%换成了top:50%,负边距和transform属性进行对应更改即可。

优点:能在各浏览器下工作,结构简单明了,不需增加额外的标签。

demo1

.md-warp{  	position: relative;  }  .md-main{  	position: absolute;  	/* 核心 */  	top: 50%;  	margin-top: -50px;  }

运用css3中的clac()属性能简化部分代码:

.md-warp{  	position: relative;  }  .md-main{  	position: absolute;  	/* 核心 */  	top: calc(50% - 50px);  }

demo2

.md-warp{  	position: relative;  }  .md-main{  	position: absolute;  	top: 50%;  	// 注意此时md-main不设置height为100px  	-webkit-transform: translate(0,-50%);  	-ms-transform: translate(0,-50%);  	-o-transform: translate(0,-50%);  	transform: translate(0,-50%);  }

 

 

单行文本垂直居中

需要满足两个条件:

  • 元素内容是单行,并且其高度是固定不变的。

  • 将其line-height设置成和height的值一样

<div><span>这是一段文字</span></div>  div{  	width: 400px;  	height: 300px;  	border: 1px solid #000;  }  span{  	line-height: 300px;  }

以上是一些常规办法,接下来是利用CSS3新特性实现的示例。

视窗单位的解决办法(垂直居中)

如果想避免使用绝对定位,我们仍然可以利用translate方法,其值刚好是元宽度和高度的一半。但是,我们如何不使用top和left将元素从top和left移动50%的偏移量呢?

首先想到的是给margin属性一个百分数,像这样:

.md-main{  	margin: 50% auto 0;  	transform: translateY(-50%);  }

效果如下所示:

我们发现并没有出现预想的结果,这是因为margin的百分比计算是相对于父容器的width来计算的,甚至包括margin-top和margin-bottom。

我们如果仍然想让元素在视窗中居中,还是有救的。CSS3定义了一种新的单位,称为相对视窗长度单位。

以下摘自w3cplus

vw是相对于视窗的宽度。与你预期刚好相反,1vw相当于视窗宽度的1%,而不是100%

与vw相似的是,1vh相当于视窗高度的1%

如果视窗的宽度小于高度,1vmin等于1vw,反之,如果视窗宽度大于高度,1vmin等于1vh

如果视窗的宽度大于高度,1vmax等于1vw,反之,如果视窗宽度小于高度,1vmax等于1vh

在上个示例的基础上,我们需要给margin设置vh单位:

.md-warp{  	position: relative;  }  .md-main{  	position: absolute;  	margin: 50vh auto 0;  	transform: translateY(-50%);  }

注意:这种方法最大的局限是只能适用于元素在视窗中垂直居中,如果是在局部的某个地方就无能为力了。

Flexbox的解决方案

如果不考虑浏览器的兼容性,Flexbox无疑是最好的解决方案,因为它的出现就是为了解决这样的问题。

完成这项工作只需要两个样式,在需要水平垂直居中的父元素上设置display:flex和在水平垂直居中的元素上设置margin:auto。

.md-warp{  	display:flex;  }  .md-main{  	margin: auto;  }

Flexbox的实现文本的水平垂直居中同样很简单。

.md-warp{  	display:flex;  }  .md-main{  	display: flex;    align-items: center;    justify-content: center;  	margin: auto;  }

补充:

inline-block配合伪类的解决方案

.md-warp{    font-size: 0;  }  .md-warp:before{    content:'';    display:inline-block;    width: 0;    height:100%;    vertical-align:middle;  }  .md-main{    display:inline-block;    vertical-align:middle;    font-size: 14px;  }

引自未知尺寸元素水平垂直居中实现详解
首先要了解垂直方向的对齐排版需使用 vertical-align ,并且只应用于inline level, inline-block level 及 table-cells 元素上;其次 vertical-align 的对齐就基于每个 line box(行框) 的,简单的说,inline level元素按照 Normal flow 水平排版出一行就会形成一个line box,其高度由内容形成,如果换行,则又是另一个line box,所有一段文本可能会分布在多个line box里,这些不重叠的line box被称作为a vertical stack of line boxes(一个垂直堆叠的线框集合)这些。
换句话说,我们的垂直居中是要在每个line box中进行处理。而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中,这时有个问题就是demo容器并非该行文本的line box,所以就算定义vertical-laign为middle也无法让该行文本在demo容器中垂直居中。我们知道line box的高度是由内容形成的,这时我们可以额外创建一个与该行文本处于同一line box的元素,同时将新增元素的高度定义为与demo容器相同,此时line box的高度将与demo一致,文本将会在line box内垂直居中,即同样实现了在demo容器中垂直居中。

绝对垂直居中

.md-warp{    position: relative;  }  .md-main{      position: absolute;      top: 0;      right: 0;      bottom: 0;      left: 0;      margin: auto;  }

常用在弹出层的定位中。

感谢各位的阅读,以上就是“css水平垂直居中的方式有哪些”的内容了,经过本文的学习后,相信大家对css水平垂直居中的方式有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是高防服务器网,小编将为大家推送更多相关知识点的文章,欢迎关注!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[