400-650-7353
您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】关于css居中

【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; 

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; 

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

二、水平垂直居中

  使用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; 

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. .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; 

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

文章“【Web前端基础知识】关于css居中”已帮助

>>本文地址:https://www.ujiuye.com/zhuanye/2020/53435.html

THE END  

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

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME