前端常见问题
选课中心 APP下载
当前位置：首页 > 技能类 > 前端 > 常见问题 > 【Web前端基础知识】关于css居中

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

更新时间：2020-08-26 19:27:10 来源： 阅读量：

【摘要】 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。下面是【Web前端基础知识】关于css居中，小编建议有准备参加考试的备考生一定要合理规划时间，仔细阅读相关规定，提前做好考前准备。下面让我们看看【Web前端基础知识】关于css居中的具体内容：

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

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

一、水平居中

BIM入门工具包(视频+资料)
¥0
去购买​

  使用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.  
  7. .content { 
  8.   width: 10rem; 
  9.   border: 1px solid green; 
  10.   margin: 0 auto; 
  11. } 

2. 内联元素水平居中

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

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

二、水平垂直居中

  使用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.  
  11. .content { 
  12.   border: 1px solid green; 
  13. } 

2. margin+ position:absolute布局

  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.  
  8. .content { 
  9.   position: absolute; 
  10.   left: 0; 
  11.   right: 0; 
  12.   top: 0; 
  13.   bottom: 0; 
  14.   width: 200px; 
  15.   height: 100px; 
  16.   margin: auto; 
  17.   border: 1px solid green; 
  18. } 

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

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

3. transform + absolute

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

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

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

4. absolute+margin负值

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

代码：

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

5. absolute + calc

  从上两种方法可以看到，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.  
  9. .content { 
  10.   position: absolute; 
  11.   border: 1px solid green; 
  12.   width: 200px; 
  13.   height: 100px; 
  14.   left: calc(50% - 100px); 
  15.   top: calc(50% - 50px); 
  16. } 

6. line-height + vertical-align

  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.  
  9. .content { 
  10.   display: inline-block; 
  11.   line-height: 1.5; 
  12.   border: 1px solid green; 
  13.   vertical-align: middle; 
  14. } 

 

以上就是【Web前端基础知识】关于css居中的内容，对前端感兴趣的小伙伴们可以关注考必过，获取更多前端前沿资讯和最新技术。最新消息小编会第一时间发布，助力大家考试，加油！

分享到： 编辑：huahua

相关文章推荐

常见问题关键词

最新文章

Copyright©2003-2021 北京创世中业科技有限公司 .All Rights Reserved 京ICP备18026804号