【Web前端基础知识】关于css居中

发布 : Web前端培训      来源:Web前端干货资料

2020-08-26 18:39:25

CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。

一、水平居中

  使用CSS控制水平居中很简单:

· 块级元素 设置width,并设置margin auto

· 内联元素 父元素设置text-align center

HTML代码如下:

  1. <div class="container">
  2. <div class="content">
  3. 水平居中哦
  4. div>
  5. div>

1. 块级元素水平居中

  1. .container {
  2. height: 300px;
  3. width: 300px;
  4. border: 1px solid red;
  5. }
  6. .content {
  7. width: 10rem;
  8. border: 1px solid green;
  9. margin: 0 auto;
  10. }

2. 内联元素水平居中

  1. .container {
  2. height: 300px;
  3. width: 300px;
  4. border: 1px solid red;
  5. text-align: center;
  6. }
  7. .content {
  8. display: inline-block;
  9. border: 1px solid green;
  10. }

代码很简单,而且没什么兼容性问题,所以通常也不需要用别的复杂方式来实现水平居中效果。

二、水平垂直居中

&emsp;&emsp;使用CSS控制垂直居中(或者水平垂直居中)就不像控制垂直居中那么方便,这里主要罗列几种。

1. flex布局

flex布局出现以后,垂直居中就很方便了,直接设置父元素:

  1. display flex
  2. align-items center

如果同时要水平居中,则同时设置:

  1. justify-content center

需要注意的是IE10+才支持,webkit前缀浏览器设置flex属性需要加webkit。

  1. .container {
  2. width: 300px;
  3. height: 300px;
  4. border: 1px solid red;
  5. display: -webkit-flex;
  6. display: flex; // 关键属性
  7. align-items: center; // 垂直居中
  8. justify-content: center // 水平居中
  9. }
  10. .content {
  11. border: 1px solid green;
  12. }

2. margin+ position:absolute布局

&emsp;&emsp;position: absolute布局的元素,通过设置top/bottom, left/right这两对属性,可以让元素在垂直方向和水平方向分别具有了自适应的特性。就像div在水平方向的默认表现一样!

上文中对于块级元素的水平居中,我们设置宽度然后配合以margin可以实现水平居中。而对于设置了top/bottom,left/right的absolute定位元素,我们设置宽高再配合margin就可以达到水平垂直居中:

  1. .container {
  2. width: 300px;
  3. height: 300px;
  4. position: relative;
  5. border: 1px solid red;
  6. }
  7. .content {
  8. position: absolute;
  9. left: 0;
  10. right: 0;
  11. top: 0;
  12. bottom: 0;
  13. width: 200px;
  14. height: 100px;
  15. margin: auto;
  16. border: 1px solid green;
  17. }

兼容性很好,IE8以上支持。

3. transform + absolute

&emsp;&emsp;absolute定位元素的left、top属性是子元素的左边界、上边界相对父元素进行定位;transform是CSS3中非常强大的一个属性,可以接收多个属性值,包括旋转、缩放、平移等多种功能。这里使用二者配合,先将子元素左上定点定位到父元素中心点,再使用transform将子元素中心点移动到父元素的中心点即可:

  1. .container {
  2. width: 300px;
  3. height: 300px;
  4. position: relative;
  5. border: 1px solid red;
  6. }
  7. .content {
  8. position: absolute;
  9. left: 50%;
  10. top: 50%;
  11. transform: translate(-50%, -50%);
  12. border: 1px solid green;
  13. }

&emsp;&emsp;这个方法有个小缺陷,就是translate函数的参数,最后的计算值不能为小数,否则有的浏览器渲染出来效果会模糊,所以使用本方法的话最好设置一下宽高为偶数。

4. absolute+margin负值

&emsp;&emsp;与上一种方法很类似,上一种方法是使用transform将元素向左上平移,本方法则是使用margin负值的方式将元素拉向左上角。

代码:

  1. .container {
  2. width: 300px;
  3. height: 300px;
  4. position: relative;
  5. border: 1px solid red;
  6. }
  7. .content {
  8. position: absolute;
  9. left: 50%;
  10. top: 50%;
  11. width: 200px;
  12. height: 100px;
  13. margin-top: -50px;
  14. margin-left: -100px;
  15. border: 1px solid green;
  16. }

5. absolute + calc

&emsp;&emsp;从上两种方法可以看到,absolute设置了left和top再通过平移或者margin将元素重新定位回去。如果我们直接可以计算出正确的left和top值,岂不是一次到位?calc函数正有此功能,当然我们需要知道子元素的宽高:

  1. .container {
  2. width: 300px;
  3. height: 300px;
  4. border: 1px solid red;
  5. text-align: center;
  6. position: relative;
  7. }
  8. .content {
  9. position: absolute;
  10. border: 1px solid green;
  11. width: 200px;
  12. height: 100px;
  13. left: calc(50% - 100px);
  14. top: calc(50% - 50px);
  15. }

6. line-height + vertical-align

&emsp;&emsp;vertical-align是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示,但是默认情况下是与父元素“基线对齐”的。这里的的基线指的是父元素每一行中的一个垂直位置,是英文x下边缘所在的水平, 通过设置vertical-align为middle可以将内联元素的中部对齐父元素的中部(基线+字母x的一半高度)。所以可以利用这一点,将父元素的行高设置为其自身高度,然后将子元素与父元素中线对齐,即可实现垂直居中。

代码:

  1. .container {
  2. width: 300px;
  3. height: 300px;
  4. border: 1px solid red;
  5. line-height: 300px;
  6. text-align: center;
  7. }
  8. .content {
  9. display: inline-block;
  10. line-height: 1.5;
  11. border: 1px solid green;
  12. vertical-align: middle;
  13. }

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

领取零基础自学IT资源

涉及方向有Java、Web前端、UI设计、软件测试、python等科目,内容包含学习路线、视频、源码等

点击申请领取资料

点击查看资料详情 

收起 


 相关推荐

问题解答专区
返回顶部