垂直居中

首先将<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水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述通过 Flexbox 布局模块与 CSS Grid布局模实现容器的居中 ...
CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
bootstrap 垂直居中布局_给你一份详细的CSS布局指南，请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...
八十七、CSS水平垂直居中的布局方式
@Author:Runsen 2020/11/30. 周一.今天又是奋斗的一天. 文章目录水平居中 inline-block+ text-algin 属性配合使用子元素block和margin属性 ...
html让布局垂直居中,css垂直居中布局总结
简介总结记录一下经常需要用到垂直居中布局,欢迎补充(空手套...O(∩_∩)O) 以下栗子如果未特别标注同一使用这样的html结构垂直居中布局利用绝对定位和负margin 绝对定位可以很容易做到 ...
翻译 | CSS网格（CSS Grid）布局入门
原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者:华翔校对者:珂珂.干干翻译 | CSS网格(CSS Grid)布局入门 bann ...
CSS实现垂直居中的常用方法
CSS实现垂直居中的常用方法在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中 ...
CSS实现垂直居中的方法
CSS实现垂直居中的方法 1.relative absolute定位: (1)css html代码 1 <!doctype html> 2 <html lang="en&q ...
CSS 水平垂直居中
方法一: 容器确定宽高:知识点:transform只能设置在display为block的元素上. <head> <meta charset="UTF-8"> ...

CSS实现垂直居中布局