CSS布局之元素垂直居中

本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理

Tip：下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂，生搬硬套容易出错。最重要的是掌握各种方法能够实现居中的原理。只要掌握了原理，那么不管问题怎么变都可以根据自己的理解选择合适的方法。

一、使用line-height

1.原理

​ 有行高的元素，内容会默认显示在行高的垂直中心处，通过设置行高等于父元素的高度，可以达到内容在父元素中垂直居中的效果

2.实现步骤

（1）父元素有一个确定的高度

（2）在父元素或在子元素中设置line-height等于父元素的高度

3.适用场景

（1）具有行高属性的单行元素

Tip：若元素有多行，line-height用同样的原理也可实现，不过需要根据行数计算且容易出错（若父元素宽度变化影响行数，那么就要重新计算布局），这里不推荐使用line-height设置多行居中。

4.完整代码展示

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>单行元素垂直居中</title>

    <style>

        #box {

            height: 120px;

            line-height: 120px;

            /*设置成和父元素同高，对子元素父元素设置都有效*/

            border: 2px solid #222222;

        }

    </style>

</head>

<body>

    <div id="box">

        <span>单行元素垂直居中</span>

    </div>

</body>

</html>

二、利用 table-cell 布局

1.原理

将子元素转为表格中单元格的形式，使用表格属性vertical-align实现居中

2.实现步骤

（1）父元素转换为表格类型display:table;

（2）子元素转换为表格单元格类型display:table-cell;

（3）子元素使用单元格居中属性vertical-align:middle;

3.适用场景

（1）未知高度单行元素垂直居中

（2）未知高度多行元素垂直居中

（3）未知高度的块级元素

4.完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>多行元素垂直居中</title>

    <style>

        #box {

            display: table;/*转换为表格元素*/

            height: 140px;

            border: 2px solid #222222;

        }

        span {

            display: table-cell;/*转换为为table-cell单元格元素*/

            vertical-align: middle;/*设置垂直居中对齐*/

        }

    </style>

</head>

<body>

    <div id="box">

        <span>多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中 </span>

   </div>

</body>

</html>

三、利用相对定位relative和绝对定位absolute

1.原理

使用定位将元素移动到所需要的位置上，将元素定位到垂直居中的位置就实现了居中

Tip：注意元素定位是以元素的某个边或者某个角作为参考，而不是以元素的中心点为参考

例：单个使用，是以边框为参考，两个组合使用是以角为参考点

（1）top：以元素上边框为参考，top：50px；就是元素上边框距离父元素上边框50px

（2）right：以元素右边框为参考，right：50px；就是元素右边框距离父元素右边框50px

（3）left和top组合使用：以元素的左上角的点为参考，top：50px；left：50px；表示元素左上角的点距离父元素上边框50px，距离父元素左边框50px；

（4）right和bottom组合使用：以元素的右下角的点为参考，bottom：50px；right：50px；表示元素右下角的点距离父元素下边框50px，距离父元素右边框50px；

（5）其他各种组合同理，两个对立方向的属性不能同时组合使用。例如top和bottom同时使用以top为准，bottom会失效。left和right；同时使用的话会以left为准right会失效。

（6）所以定位50%是，子元素边框移动到50%的位置，还需要移动回来子元素一半的宽度，达到真正的居中

2.步骤

（1）先将父元素设置为相对定位relative

（2）将子元素设置为绝对定位absolute（子绝父相）

（3）向下移动子元素，移动距离为父容器高度的一半（50%）

（4）通过向上移动子元素的一半宽度（具体px值）以达到垂直居中。（通过margin实现）

3.适用场景

（1）已知高度的块级元素垂直居中

4.完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>已知高度的块级元素垂直居中</title>

    <style>

        #box {

            position: relative;

            height: 200px;

            border: 2px solid #222222;

        }

        .child {

            height: 100px;

            width: 100px;

            background: red;

            position: absolute;

            top: 50%;

            /*设置块级元素上边框距离顶部50%，使元素上边框这条线垂直居中于父元素*/

            margin-top: -50px;

            /*设置元素上边框向上移动元素高度的一半，使元素整体垂直居中*/

        }

    </style>

</head>

<body>

    <div id="box">

        <div class="child"></div>

    </div>

</body>

</html>

四、使用弹性盒子flex布局

方法一：align-items属性

1.原理

利用布局神器弹性盒子的align-items属性进行侧轴方向布局。弹性盒子默认主轴是左右方向，侧轴是上下方向，设置侧轴上下方向居中。即可达到使子元素垂直居中的效果。也可对子元素使用align-self单独设置居中，可以覆盖掉align-items属性

2.实现步骤

（1）父元素开启弹性盒子display:flex;

（2）父元素设置align-items:center;（侧轴方向居中对齐）

3.适用场景

（1）未知高度的元素垂直居中

（2）已知高度的元素垂直居中

（3）浮动元素的垂直居中

4.完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>未知高度元素垂直居中</title>

    <style>

        #box {

            display: flex;/*开启弹性盒子*/

            align-items: center;/*设置侧轴方向居中*/

            border: 1px solid #222222;

            height: 100px;

        }

        .child{

            float: left;/*浮动的元素同样可以居中*/

        }

    </style>

</head>

<body>

    <div id="box">

        <div class="child">未知高度的元素垂直居中</div>

    </div>

</body>

</html>

方法二：justify-content属性

1.原理

利用布局神器弹性盒子的justify-content属性进行主轴方向布局。弹性盒子默认主轴是左右方向，侧轴是上下方向。所以要先用flex-direction把主轴方向改为上下方向。再设置主轴居中。即可达到使子元素垂直居中的效果。

2.实现步骤

（1）父元素开启弹性盒子display:flex;

（2）父元素将主轴设置为上下方向flex-direction: column;

（3）父元素设置justify-content: center;（主轴方向居中对齐）

3.适用场景

（1）未知高度的元素垂直居中

（2）已知高度的元素垂直居中

（3）浮动元素的垂直居中

（4）多行元素的垂直居中

4.完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>多行元素垂直居中</title>

    <style>

        #box {

            height: 140px;

            /*需设置高度，不设置的话默认高度为内容撑起的高度，看不出居中效果*/

            display: flex;/*开启弹性盒子布局*/

            flex-direction: column;/*设置主轴纵向排列*/

            justify-content: center;/*在主轴方向上居中*/

            border: 2px solid #222222;

        }

    </style>

</head>

<body>

    <div id="box">

        <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit quidem laudantium quasi, fugit sapiente,

            culpa at voluptatum neque nemo nobis cupiditate assumenda esse aut 				</span>

    </div>

</body>

</html>

CSS布局：元素垂直居中的更多相关文章

  1. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  2. css -- 布局元素

    默认情况下拥有布局的元素:HTML ,table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marque ...

  3. CSS关于元素垂直居中的问题

    今天碰到了一个问题,给一个父容器和一个子元素,子元素不定高和不定宽,怎么让子元素居中在父容器中,比如下段代码 方法1: <div class="div1"> <d ...

  4. Web前端 css实现元素垂直居中的常用方法

    方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</spa ...

  5. 黄聪：用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  6. css布局--水平垂直居中

    1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中 html <div class="parent"> &l ...

  7. [CSS] 子元素垂直居中的两种方式

    1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...

  8. 用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  9. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

随机推荐

  1. nuxt项目打包上线，以及nuxt项目基础代码分享

    nuxt的项目部署到线上环境,有多种方法,这里分享我使用的方法,一步步照着配置,就可以配置成功~ (1)项目先执行npm run build 打包好   (2)服务器安装node 和pm2依赖 服务器 ...

  2. python面向对象编程小程序- 选课系统

    选课系统 花了一晚上写的,可能还存在不足 1.程序框架 2.文件夹建立 D:/选课系统 |___api | |___common_api.py |___bil | |___common.py |___ ...

  3. [leetcode]95 Unique Binary Search Trees II (Medium)

    原题 字母题添加链接描述 一开始完全没有思路.. 百度看了别人的思路,对于这种递归构造的题目还是不熟,得多做做了. 这个题目难在构造出来.一般构造树都需要递归. 从1–n中任意选择一个数当做根节点,所 ...

  4. 数据库---T-SQL语句：查询语句（二）

    >查询: 一.查询所有数据: select * from Info    ---查询所有数据(行) select Name from Info  ---查询特定列(Name列) select N ...

  5. SpringBoot(18）---通过Lua脚本批量插入数据到Redis布隆过滤器

    通过Lua脚本批量插入数据到布隆过滤器 有关布隆过滤器的原理之前写过一篇博客: 算法(3)---布隆过滤器原理 在实际开发过程中经常会做的一步操作,就是判断当前的key是否存在. 那这篇博客主要分为三 ...

  6. 或许是你应该了解的一些 ASP.NET Core Web API 使用小技巧

    一.前言 在目前的软件开发的潮流中,不管是前后端分离还是服务化改造,后端更多的是通过构建 API 接口服务从而为 web.app.desktop 等各种客户端提供业务支持,如何构建一个符合规范.容易理 ...

  7. jsp对数据库的使用

    JDBC由Sun公司制定,全称JavaDataBase Connectivity,是一种可以执行SQL语句并可返回结果的javaAPI,支持多种关系型数据库,封装在Java.sql.* 它的具体位置在 ...

  8. Selenium浏览器自动化测试框架

    selenium简介 介绍 Selenium [1]  是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 1 ...

  9. 10分钟了解分布式CAP、BASE理论

    CAP理论 2000年7月,Eric Brewer教授提出CAP猜想:2年后,Seth Gilbert和Nancy Lynch从理论上证明了CAP:之后,CAP理论正式成为分布式计算领域的公认定理. ...

  10. Eclipse "Adb failed to restart !"

    今天遇到这个问题,如图所示: 上网找了下,原来是电脑上的各种手机助手抢占了手机链接.http://blog.csdn.net/zhufuing/article/details/19398125 说得很 ...