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:// ...
随机推荐
- Simpo
Time: 2017-01-16 - Download Github: https://github.com/KeliCheng/Simpo一款快速发布文字和图片到社交网站的macOS菜单栏App,目 ...
- O2O倒逼汽车行业改革：服务超越销售成重心
汽车作为越来越普及的出行工具,已经进入千家万户.与其他家具.家电.服饰等产品不同,从新车销售到售后保养.保险购买.维修乃至报废阶段,都能细分化,形成一个个潜力巨大的垂直领域.而随着互联网元素的渗入,汽 ...
- 从5个经典工作开始看语义SLAM
本文试图概括Semantic SLAM的主要思路和近年工作,⻓期更新.但因水平有限,若有错漏,感谢指正. (更好的公式显示效果,可关注文章底部的公众号) Semantic SLAM 简介 至今为止,主 ...
- 国际控制报文协议ICMP
国际控制报文协议ICMP ICMP简介 ICMP 用于主机或路由器报告差错情况和提供有关异常情况的报告(检测网络错误). ICMP 不是高层协议,而是 IP 层的协议. ICMP 报文的格式 ICMP ...
- PyQt5之俄罗斯方块
上个礼拜有个需求,对csv里的数据按条件进行拆分计算.一想到要做计算,少不了pandas.还有个要求最好是生成命令行工具或者带有界面. 于是尝试下,使用PyQt5做了个简单的UI界面给程序包个壳子,然 ...
- .Net Core调用oracle存储过程
一 前言 实战踩坑系列,调用第三方Oracle存储,各种血泪史,现记录如下. 二 入坑 首先,调用Oracle需要安装客户端驱动才行,但是在程序开发中下载客户端驱动是一个不明智的选择.于是,不管是微软 ...
- BEM命名及其在sass中的实践
Why use it 近几年web应用的发展可以用疯狂来形容,依靠浏览器的支持以及前端技术和框架的发展,很多应用已经把大量的逻辑从服务器端迁移到了浏览器端,使用前后端分离技术,浏览器端与用户进行交互来 ...
- 浏览器内核之 HTML 解释器和 DOM 模型
微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题. 前言 此文章是我最近在看的[WebKit 技术内幕]一书的一些理解和做的笔记.而[WebKit 技术内幕]是基 ...
- 前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...
- Mac笔记本使用小道解答集
如何设置Mac默认应用程序 https://www.jianshu.com/p/0f912e6c846c 苹果本安装微软雅黑 下载微软雅黑字体Mac版 解压.ttf 拖拽放入 我的电脑/资源库/fon ...