CSS实现垂直居中布局
垂直居中
首先将<html>与<body>的高度设置为100%(为演示父元素不定宽高的效果)，并清除<body>的默认样式。
html,body{
margin: 0;
height: 100%;
}
垂直居中大致分为两类，父元素定宽高与父元素不定宽高，将两类样式以及子容器设定好。
.set-parent,.dy-parent{
width: 300px;
height: 200px;
background: #eee;
margin: 10px 0;
}
.child{
width: 20px;
height: 10px;
background: #fff;
}
.dy-parent{
width: 30%;
height: 20%;
}
父元素定宽高 position+margin
使用margin: auto使水平居中，将子容器设定为relative以在不脱离文档流的情况下偏移50%，由于本身子容器占用一定宽高，会将其撑下，使用margin使其向上偏移。
若是子容器使用absolute定位，则父容器应设置为relative，否则会其相对于static定位以外的第一个父元素进行定位，在本示例中会以浏览器为基准定位，此外absolute无法使用margin: auto水平居中。
<!-- 父元素定宽高 position+margin -->
<div class="set-parent" >
<div class="child" style="position: relative;top: 50%;margin: auto;margin-top: -5px;"></div>
</div>
父元素定宽高 position+transform
原理与position+margin相同，CSS3的transform使得div向上平移自身高度的50%。
<!-- 父元素定宽高 position+transform -->
<div class="set-parent" >
<div class="child" style="position: relative;top: 50%;margin: auto;transform: translateY(-50%);"></div>
</div>
父元素定宽高 position+calc
css3提供calc函数，能够进行动态计算。
<div class="set-parent" >
<div class="child" style="position: relative;top: calc(50% - 5px);left: calc(50% - 10px);"></div>
</div>
父元素不定宽高 flex
flex布局可以说是布局神器，极其强大，绝大部分现代浏览器都兼容性flex布局。
<div class="dy-parent" style="display: flex;justify-content: center;align-items: center;">
<div class="child" ></div>
</div>
父元素不定宽高 grid
grid布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，grid布局与flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别，flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目"所在的单元格，可以看作是二维布局，可以认为grid布局比flex布局强大。
<div class="dy-parent" style="display: grid;justify-content: center;align-content: center;">
<div class="child" ></div>
</div>
父元素不定宽高 table
table中有vertical-align属性设置垂直对齐方式。
<div class="dy-parent" style="display: table;">
<div style="display: table-cell;vertical-align: middle;">
<div class="child" style="margin: auto;" ></div>
</div>
</div>
示例
<!DOCTYPE html>
<html>
<head>
<title>垂直居中</title>
<meta charset="utf-8">
</head>
<body>
<!-- 父元素定宽高 position+margin -->
<div class="set-parent" >
<div class="child" style="position: relative;top: 50%;margin: auto;margin-top: -5px;"></div>
</div>
<!-- 父元素定宽高 position+transform -->
<div class="set-parent" >
<div class="child" style="position: relative;top: 50%;margin: auto;transform: translateY(-50%);"></div>
</div>
<!-- 父元素定宽高 position+calc -->
<div class="set-parent" >
<div class="child" style="position: relative;top: calc(50% - 5px);left: calc(50% - 10px);"></div>
</div>
<!-- 父元素不定宽高 flex -->
<div class="dy-parent" style="display: flex;justify-content: center;align-items: center;">
<div class="child" ></div>
</div>
<!-- 父元素不定宽高 grid -->
<div class="dy-parent" style="display: grid;justify-content: center;align-content: center;">
<div class="child" ></div>
</div>
<!-- 父元素不定宽高 table -->
<div class="dy-parent" style="display: table;">
<div style="display: table-cell;vertical-align: middle;">
<div class="child" style="margin: auto;" ></div>
</div>
</div>
</body>
<style type="text/css">
html,body{
margin: 0;
height: 100%;
}
.set-parent,.dy-parent{
width: 300px;
height: 200px;
background: #eee;
margin: 10px 0;
}
.child{
width: 20px;
height: 10px;
background: #fff;
}
.dy-parent{
width: 30%;
height: 20%;
}
</style>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
CSS实现垂直居中布局的更多相关文章
- css布局 - 垂直居中布局的一百种实现方式（更新中...）
首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...
- CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- CSS 实现：父元素包含子元素，子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- css垂直居中布局总结
简介 总结记录一下经常需要用到垂直居中布局,欢迎补充(空手套...O(∩_∩)O) 以下栗子如果未特别标注同一使用这样的html结构 <div class="container&quo ...
- 五种方法让CSS实现垂直居中
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- 转: css实现垂直居中的方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...
- css文本垂直居中的实现
本案例已经有新的比较简便的解决方案,可以直接采用 vertical-align:middle 样式对行内元素进行垂直居中布局,详见: 微信小程序开发——如何让商品标题类文本根据内容长度垂直居中. 以下 ...
- 顽石系列：CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
随机推荐
- MyBatis XML 配置文件 properties 元素扩展
在分析 MyBatis XML 配置文件 properties 元素时提到了三种配置方式,其中 property 子元素 和 properties 文件都比较容易理解,但是为什么还要提供一种代码参数传 ...
- 一下午简单写个搭建Flutter开发环境，dome跑起来！
1.下载flutter包由于需要翻墙,国内下载会出现问题,所有需要先配置一下用户环境变量. export PUB_HOSTED_URL=https://pub.flutter-io.cn export ...
- QQ公众号出炉 同门相争意欲何为
同门相争意欲何为"> 当初腾讯大张旗鼓地推出微信时,很多业内人士都认为其与QQ在功能.用户等方面多有重叠,肯定会阻碍QQ的发展和微信的成长.没想到,二者避重就轻地在不同的侧重点发展,反 ...
- Face Recognition 人脸识别该如何测试
猪圈子,一个有个性的订阅号 01 测量人脸识别的主要性能指标有 1.误识率(False;Accept;Rate;FAR):这是将其他人误作指定人员的概率; 2.拒识率(False;RejectRate ...
- bzoj1603: [Usaco2008 Oct]打谷机 (纱布题)
Description Input Output Sample Input Sample Output Time Limit: 5 Sec Memory Limit: 64 MB Submit: 7 ...
- 如何看待Java是世界上最好的语言？
Java出现二十多年以来,一直都是主流的开发语言,Java创建于 1995 年,在 20多年的发展历程中,Java 已经证明自己是用于自定义软件开发的顶级通用编程语言. Java 广泛应用于科学教育. ...
- 初识 “HTML”
HTML 什么是HTML? ①全称:超文本标记语言②超文本:在普通的文本内容的基础上添加超链接.图片.视频等③标记语言:HTML提供一系列标签④版本:HTML 4.01 HTML声明 1.编码格式:H ...
- 简单说 通过CSS实现 文字渐变色 的两种方式
说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...
- 干货--手把手撸vue移动UI框架： 滑动删除
前言 前几天因为项目需要,用jquery写了一个swiperOut组件,然后我就随便把这个组件翻译成基于Vue的了,有兴趣的朋友可以看下.Github源码(不麻烦的话帮忙start,请各位大爷赏个星星 ...
- React解决长列表方案(react-virtualized)
github地址 高效渲染大型列表的响应式组件 使用窗口特性,即在一个滚动的范围内,呈现你给定数据的一小部分,大量缩减了呈现组件所需的时间,以及创建DOM节点的数量. 缺点:滑动过快,可能会出现空白的 ...