垂直居中

首先将<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实现垂直居中布局的更多相关文章

  1. css布局 - 垂直居中布局的一百种实现方式（更新中...）

    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...

  2. CSS里总算是有了一种简单的垂直居中布局的方法了

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  4. css垂直居中布局总结

    简介 总结记录一下经常需要用到垂直居中布局,欢迎补充(空手套...O(∩_∩)O) 以下栗子如果未特别标注同一使用这样的html结构 <div class="container&quo ...

  5. 五种方法让CSS实现垂直居中

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  6. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  7. 转: css实现垂直居中的方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...

  8. css文本垂直居中的实现

    本案例已经有新的比较简便的解决方案,可以直接采用 vertical-align:middle 样式对行内元素进行垂直居中布局,详见: 微信小程序开发——如何让商品标题类文本根据内容长度垂直居中. 以下 ...

  9. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

随机推荐

  1. Python 代码实现验证码识别

    Python 代码实现验证码识别 测试开发社区  1周前 源 /  j_hao104 一.探讨 识别图形验证码可以说是做爬虫的必修课,涉及到计算机图形学,机器学习,机器视觉,人工智能等等高深领域…… ...

  2. [大餐]开发摘记1--我的Fragment通信的框架

    [大餐]开发摘记1--我的Fragment通信的框架 | 卖牙膏的芖口钉 盒子 盒子 博客 分类 标签 友链 大专栏  [大餐]开发摘记1--我的Fragment通信的框架ass="ROUN ...

  3. [Python_scrapy图片爬取下载]

    welcome to myblog Dome地址 爬取某个车站的图片 item.py 中 1.申明item 的fields class PhotoItem(scrapy.Item): # define ...

  4. 设计模式详解及PHP实现：代理模式

    [目录] 代理模式(Proxy pattern) 代理模式是一种结构型模式,它可以为其他对象提供一种代理以控制对这个对象的访问. 主要角色 抽象主题角色(Subject):它的作用是统一接口.此角色定 ...

  5. 推荐系统--隐语义模型LFM

    主要介绍 隐语义模型 LFM(latent factor model). 隐语义模型最早在文本挖掘领域被提出,用于找到文本的隐含语义,相关名词有 LSI.pLSA.LDA 等.在推荐领域,隐语义模型也 ...

  6. 自定义Toast的出现样式

    使用下面的方法来获取一个Toast对象: private Toast showShortToast() { if (toast == null) { toast = new Toast(this); ...

  7. MySQL多表查询、事务、DCL：内含mysql如果忘记密码解决方案

    MySQL多表查询.事务.DCL 多表查询 * 查询语法: select 列名列表 from 表名列表 where.... * 准备sql # 创建部门表 CREATE TABLE dept( id ...

  8. lnmp 一键安装包(nginx) 运行laravel项目显示该网页无法正常运行

    vi /usr/local/nginx/conf/fastcgi.conf 注释掉 PHP_ADMIN_VALUE #fastcgi_param PHP_ADMIN_VALUE "open_ ...

  9. springboot创建，自动装配原理分析，run方法启动

    使用IDEA快速创建一个springboot项目 创建Spring Initializr,然后一直下一步下一步直至完成 选择web,表示创建web项目 运行原理分析 我们先来看看pom.xml文件 核 ...

  10. iview中遇到table的坑（已经修改了table的数据，但是界面没有更新）

    https://blog.csdn.net/bigdargon/article/details/89381466 https://blog.csdn.net/qiuyan_f/article/deta ...