使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧。

1. 首先来聊聊水平居中:

  • text-align 与 inline-block 的配合

就像这样:

See the Pen mVpVEr by xal821792703 (@honoka) on CodePen.

HTML 中在想要居中的元素外面套了一个父元素,然后在 CSS 中将父元素的 text-align 属性设为 center,接下来将子元素的 display 属性设为 inline-block 就可以水平居中了。

  • 通过 margin 实现

See the Pen rxpxmR by xal821792703 (@honoka) on CodePen.

通过 margin 实现连父元素都不用套了,直接 margin: 0 auto; 搞定,对,就是这么简单快捷,恐怕是居中最常用的方法了吧。

2. 结果老板表示只是水平居中不行,还得垂直居中:

  • 还是上 margin 来实现一下绝对定位元素的水平垂直居中吧

See the Pen NxXxBz by xal821792703 (@honoka) on CodePen.

注意代码中的几个关键点:

    • 子元素 div 绝对定位
    • 父元素需要被定位
    • 子元素 top、bottom、left、right 四个位置值均为 0
    • 子元素 margin: auto;
  • 来自 CSS3 的新杀器 flex

See the Pen xZpZMw by xal821792703 (@honoka) on CodePen.

使用 flex 容器布局实现水平垂直居中的关键点在于:

    • 父元素 display 属性设为 flex
    • 垂直布局的属性是 align-items,设为 center 时便垂直居中
    • 水平布局的属性是 justify-content,设为 center 时水平居中
    • 子元素弹性居中,增加子元素也不会有影响

另外请注意兼容性问题,见下图:

其实利用 CSS 实现居中还有许多方法我没有写在博文中,如何选择居中的技术方案,最后还是得取决于当前业务场景下的浏览器支持程度和适合度。


源代码已同步至个人 repo,欢迎参考交流(笑)

CSS 布局实例系列(一)总结CSS居中的多种方法的更多相关文章

  1. CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  2. CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

    Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...

  3. CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

  4. css未知宽高的盒子div居中的多种方法

    不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...

  5. div+css布局教程系列1

    <!doctype html><html><head><meta charset="utf-8"><title>简单布局 ...

  6. Gradle学习系列之二——创建Task的多种方法

    在本系列的上篇文章中,我们讲到了Gradle入门,在本篇文章中我们将讲到创建Task的多种方法. 请通过以下方式下载本系列文章的Github示例代码: git clone https://github ...

  7. CSS布局奇淫技巧之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  8. 两个HTML,CSS布局实例

    今天首先仿照某公司页面只做了一个几乎一模一样,连距离都相同的页面. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  9. CSS布局奇淫技巧之--各种居中<转>

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

随机推荐

  1. SSO单点登录系列5:cas单点登录增加验证码功能完整步骤

    本篇教程cas-server端下载地址:解压后,直接放到tomcat的webapp目录下就能用了,不过你需要登录的话,要修改数据源,C:\tomcat7\webapps\casServer\WEB-I ...

  2. MyEclipse导入Hibernate出现Path must include project and resource;/project name

    如图,在MyEclipse 2014以下版本中都没遇见这个问题. 在导入Hibernate框架的时候,可以说真的随缘,运气不好,明明配置全都没问题,还是连续几次失败,这个时候除了烧高香拜拜,也只能靠百 ...

  3. Swif语法基础 要点归纳(一)

    常量和变量 用let声明常量      let m = 20 用var声明变量      var n = 0 类型推导机制           声明常量或变量时.能够不指定常量/变量类型,编译器会依据 ...

  4. 非阻塞socket中read、write返回值

    read返回值 >0   读取数据的长度 =0   接收到对端发送的FIN,表示对端的写端关闭. <0   如果errno=EINTR.收到信号并从信号处理函数返回时,慢系统调用会返回并设 ...

  5. sql server 类oracle vm_contact() 函数创建

    CREATE FUNCTION dbo.fun_orgname(@id int)RETURNS varchar(8000)AS BEGIN      DECLARE @str varchar(8000 ...

  6. mysql用merge合并表

    merge合并表的要求 1.合并的表使用的必须是MyISAM引擎 2.表的结构必须一致,包括索引.字段类型.引擎和字符集 实例: create table if not exists user1( i ...

  7. C#利用SharpZipLib解压或压缩文件(支持多层目录递归压缩)

    需要下载ICSharpCode.SharpZipLib.dll using System; using System.Collections.Generic; using System.Linq; u ...

  8. C++类型转换运算符 static_cast,dynamic_cast,reinterpret_cast,const_cast

    类型转换是一种让程序猿可以临时或永久性改变编译器对对象的解释机制.可改变对象解释方式的运算符称为类型转换运算符. 为何须要进行类型转换 通常为了实现使用不同环境的个人和厂商编写的模块可以相互调用和协作 ...

  9. java学习笔记——java中对象的创建,初始化,引用的解析

    如果有一个A类. 1.例如以下表达式: A  a1 = new A(); 那么A是类,a1是引用.new A()是对象.仅仅是a1这个引用指向了new A()这个对象. 2.又如: A  a2; A代 ...

  10. Hadoop2.6.0子项目hadoop-mapreduce-examples的简介

    引文 学习Hadoop的同学们,一定知道假设执行Hadoop自带的各种样例,以大名鼎鼎的wordcount为例,你会输入下面命令: hadoop org.apache.hadoop.examples. ...