欢迎光临
我的个人博客网站

关于css垂直水平居中的几种方式

css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式。

1.水平居中

margin: 0 auto;

效果图:

关于css垂直水平居中的几种方式

 

 

 

 

 

 

 

 

而文字的垂直水平居中也比较简单,加上line-height: 200px;与text-align: center;即可。

#test{
width: 200px;
height: 200px;
line-height: 200px;
background: red;
margin: 0 auto;
text-align: center;
}

效果图:

关于css垂直水平居中的几种方式

2.元素的垂直水平居中

相对于文字来讲,元素的垂直水平居中就没这么简单,因为line-height: 200px;与text-align: center;都是针对文本的属性,对于元素我们需要使用定位。

a.已知元素高宽的垂直水平居中

#wrap{       position: relative;       width: 400px;       height: 600px;       background: red;       margin: 0 auto;      }              #inner{       position: absolute;       left: 50%;       top: 50%;       margin-left: -50px;       margin-top: -50px;       width: 100px;       height: 100px;       background: pink;     }

 

<div id="wrap">

  <div id=”inner”>
    test
  </div>

</div>

 

效果图:

关于css垂直水平居中的几种方式

 

 

在这里需要注意margin-left与margin-top需要给定-50px即当前元素的一半而非-50%,因为%是相对于父元素的大小,所以这种需要已知元素的高宽。

而除了给margin负值外,还有一种方式:

#wrap{     position: relative;     width: 400px;     height: 600px;     background: red;     margin: 0 auto; }  #inner{     position: absolute;     left: 0;     right: 0;     top: 0;     bottom: 0;     margin: auto;     width: 100px;     height: 100px;     background: pink; }

 

效果图:

关于css垂直水平居中的几种方式

这里需要注意的是元素的高宽也需要定义,如果没有定义高宽元素会填充整个父元素。

而此种方式就要说到绝对定位盒子的特性:

 1.高宽有内容撑开

 2.水平方向上: left + right + width + padding + margin = 包含块padding区域的尺寸

 3.垂直方向上: top + bottom + height + padding + margin = 包含块padding区域的尺寸

我们可以尝试代入参数:

水平:0 + 0 + 100 + 0 + auto = 400

margin:auto根据公式可得300px及左右各分得150px,

垂直:0 + 0 + 100 + 0 + auto = 600

margin:auto根据公式可得500px及左右各分得250px,

关于css垂直水平居中的几种方式

而前面提到的如果没有定义高宽则高宽默认值为auto,

水平:0 + 0 + auto + 0 + auto = 400

垂直:0 + 0 + auto + 0 + auto = 600

元素会填充整个父元素即包含块尺寸均分配给高宽,由此可知高宽优先级高于margin。

关于css垂直水平居中的几种方式

而如果不定义margin: auto;

水平:0 + 0 + 100 + 0 + 0 = 400

垂直:0 + 0 + 100 + 0 + 0 = 600

数据均定死则不会分配margin

关于css垂直水平居中的几种方式

b.未知元素高宽的垂直水平居中

#wrap{     position: relative;     width: 400px;     height: 600px;     background: red;     margin: 0 auto; }  #inner{     position: absolute;     left: 50%;     top: 50%;     transform: translate3d(-50%,-50%,0);     background: pink; }

 

效果图:

关于css垂直水平居中的几种方式

对于translate3d(-50%,-50%,0)中的三个参数分别为x轴偏移自身一半、y轴偏移自身一半、z轴不动,但是在can i use中我们可以看到transform的兼容性并不是太好。

关于css垂直水平居中的几种方式

 

到此,css的垂直水平居中就介绍完了,当然,可能存在些许错误望大家海涵并在评论区多多指正交流,谢谢大家花费时间阅览!

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 关于css垂直水平居中的几种方式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏