CSS 布局实例系列(一)总结CSS居中的多种方法
使用 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居中的多种方法的更多相关文章
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?
Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
- css未知宽高的盒子div居中的多种方法
不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...
- div+css布局教程系列1
<!doctype html><html><head><meta charset="utf-8"><title>简单布局 ...
- Gradle学习系列之二——创建Task的多种方法
在本系列的上篇文章中,我们讲到了Gradle入门,在本篇文章中我们将讲到创建Task的多种方法. 请通过以下方式下载本系列文章的Github示例代码: git clone https://github ...
- CSS布局奇淫技巧之--各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- 两个HTML,CSS布局实例
今天首先仿照某公司页面只做了一个几乎一模一样,连距离都相同的页面. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- CSS布局奇淫技巧之--各种居中<转>
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
随机推荐
- Java三大器之过滤器(Filter)的工作原理和代码演示
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术之一,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp,Servlet, 静 ...
- bat 同步windows系统时间
需要使用管理员权限运行 net start w32timew32tm /config /updatew32tm /resync /rediscovernet stop w32timepause
- node - 上传文件并且修改名称
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- redis基本数据类型及命令
一.key相关命令 redis本质上是key-value数据库.所以key操作适用于redis的任何数据类型缓存. 1.exists key判断是否存在key,存在返回1,不存在返回0 2.del k ...
- POJ2536 Gopher II【二分图最大匹配】
题目链接: http://poj.org/problem? id=2536 题目大意: 有N仅仅鼹鼠和M个洞穴,假设鼹鼠在S秒内不可以跑到洞穴,就会被老鹰捉住吃掉. 鼹鼠跑的速度为V米/秒. 已知一个 ...
- 不得不看的Java代码性能优化总结
原文:https://blog.csdn.net/mr_smile2014/article/details/50112723 前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么 ...
- asp.net 导出excel 中文乱码解决方法 (转)
用我转载的上一篇文章 Asp.net中把DataTable或DataGrid导出为Excel 导出的文档,中文有乱码现象,其实要解决中文乱码很简单,设置一下字符集.如下: // 设置编码和附件格式 c ...
- java统计中英文字数 Java问题通用解决代码
http://yangchao20020.blog.163.com/blog/static/483822472011111635424751/ 这个不适用于新浪微博字数的统计,结果有差别,若需要可 ...
- asp.net core mvc视频A:笔记3-3.Model与强类型视图
创建项目,添加TestController 定义一个类(Model),并赋值 建立视图页面 注意:Model是一个特定的对象,取决于传递过来的参数 运行结果 到现在为止,依然没有改变动态类型,需要转换 ...
- JavaScript事件使用指南
事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流. 事件冒泡 IE的事件流叫做事件冒泡 ...