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以上支持。

课程好礼申请领取
您的姓名
您的电话
意向课程
 

中公优就业

官方QQ

扫描上方二维码或点击一键加群,免费领取价值599元网课,加群暗号:599。 一键加群

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,领80G学习资料
QQ交流群
领取免费网课
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
领取80G学习资料

淘宝商家短视频
预约试听
2020OAO训练营
免费试听
课程资料、活动优惠 领取通道