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:// ...
随机推荐
- 云服务器 ECS--查找公网ip使用终端连接云服务
前段时间购买了阿里云服务器,购买之后一直没用使用,今天来操作一波,可谓一波三折,只能说,不看他们的操作指南你可能连地方都找不到,所以,在这里,我想给初次购买阿里云服务的童鞋门,写写我是怎么使用阿里云服 ...
- Win10下JDK环境搭建的两种方法
jdk1.8--64位官网下载的百度网盘 https://pan.baidu.com/s/1A7jYfupwMWZawb5z_RSdJg 提取码: 92eu 第一种方法(建议) 变量名: ...
- MatterTrack Route Of Network Traffic :: Matter
Python 1.1 基础 while语句 字符串边缘填充 列出文件夹中的指定文件类型 All Combinations For A List Of Objects Apply Operations ...
- mailx发邮件报错Error initializing NSS: Unknown error -8015. . . . message not sent.处理
前提:在配置zabbix3.0监控发送邮件告警时zabbix界面显示邮件以送达,但是QQ邮箱却没有收到邮件,再shell命令行测试发邮件QQ邮箱又是可以收到的,在别人的提醒下用zabbix用户执行发送 ...
- 京东Y事业部打造一体化质量管理平台
互联网企业质量管理的困惑 作为互联网时代的互联网企业,我们的研发模式和传统模式相比,最显著的不同在于发布节奏加快了,这个加快不是快了10%,20%,50%,而是加快了几倍,甚至几十倍,上百倍.面对加快 ...
- html｜Area
http://tomys.win/ HTML图片热区Area map的用法只是在上学的时候学习到过,在实际工作中一直没用过,如果 不是这次紧急任务,可能永远都不会想起这个功能.在一些特殊的html ...
- 安卓权威编程指南 -笔记（19章 使用SoundPool播放音频）
针对BeatBox应用,可以使用SoundPool这个特别定制的实用工具. SoundPool能加载一批声音资源到内存中,并支持同时播放多个音频文件.因此所以,就算用户兴奋起来,狂按按钮播放全部音频, ...
- C与ARM汇编结合实现mini2440串口uart简单程序
最近学完了ARM的一些基础知识,开始在mini2440上开发一些简单的程序,串口发送程序是一开始涉及多个寄存器的例子,稍有繁多的步骤应该是开发过程中要慢慢适应的境况 下面的程序的目的是实现mini24 ...
- 30分钟学会Objective-C
注: 本文首发于我的个人博客:https://evilpan.com/2019/04/05/objc-basics/ 请原谅我的标题党.但是如果你有其他语言的学习经验,要学习Objective-C的语 ...
- Jave基本数据类型
基本类型,或者叫做内置类型,是JAVA中不同于类的特殊类型.它们是我们编程中使用最频繁的类型,因此面试题中也总少不了它们的身影,在这篇文章中我们将从面试中常考的几个方面来回顾一下与基本类型相关的知识. ...