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来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
随机推荐
- UI自动化测试篇 :ReportNG替代TestNG自带html版测试报告初探
转载http://www.cnblogs.com/chengtch/p/6071322.html “1.1.4版本的ReportNG是最后一个版本,之后不再做维护.作为一个简单的测试报告插件,它是创造 ...
- 数组练习:各种数组方法的使用&&事件练习:封装兼容性添加、删除事件的函数&&星级评分系统
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PS 如何制作Vista的毛玻璃效果
1 对一个图像的任意一部分新建一个选区 2 对选中区域进行高斯模糊,大小为5像素 3 再次新建一个图层,填充为深蓝色(#E9E7E3),填充为10%-15%.高斯模糊0.5像素. 4 再对 ...
- HTTP常用的请求头和响应头
1.请求头 Connection:表示是否需要持久连接.若值为Keep-Alive,就可以利用持久连接的优点,当页面包含多个元素时(例如Applet,图片),显著地减少下载所需要的时间.要实现这一点, ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- asp.net core mvc视频A:笔记2-2.接收数据
传参方式一:使用内置方法传递 运行结果 其他获取方法 Session对象在HttpContext中 启用Session 使用Session 运行演示 传参方式二:数据绑定 普通类型(string).自 ...
- logstash5安装并实现mariadb数据写入到elasticsearch
java环境这里默认安装了 ,一般源码安装,这里就不说了 一.安装logstash 安装logstash可以用yum安装,也可以用源码安装: yum安装: 1.导入GPG: rpm --import ...
- linux bash shell run ros launch file and multi_node
#!/bin/bash #source /opt/ros/melodic/setup.bash #source /home/pi/catkin_ws/devel/setup.bash #ROS_PAC ...
- .net之GridView、DataList、DetailsView(二)
GridView自带分页功能,效率不高,适用于小数据量的显示. protected void GridView1_PageIndexChanging(object sender, GridViewPa ...
- C# virtual,override,new 整理
今天仔细学习了一下C#中virtual, override, new关键字,参考了网上的很多资料,现整理一下. Virtual: virtual 关键字用于修饰方法.属性.索引器或事件声明,并使它们可 ...