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. 【Android UI】顶部or底部菜单的循环滑动效果一

    实现了分页的滑动效果,做的demo流畅运行 注:貌似支持的样式(控件)有一定的限制,我试过短信的listview页面,暂无法实现滑动效果 java文件:MainActivity.java.Activi ...

  2. Excel催化剂开源第42波-与金融大数据TuShare对接实现零门槛零代码获取数据

    在金融大数据功能中,使用了TuShare的数据接口,其所有接口都采用WebAPI的方式提供,本来还在纠结着应该搬那些数据接口给用户使用,后来发现,所有数据接口都有其通用性,结合Excel灵活友好的输入 ...

  3. Spark学习之第一个程序 WordCount

    WordCount程序 求下列文件中使用空格分割之后,单词出现的个数 input.txt java scala python hello world java pyfysf upuptop wintp ...

  4. [PTA] 数据结构与算法题目集 6-8 求二叉树高度 & 6-9 二叉树的遍历

    6.8 二叉树高度 int GetHeight(BinTree BT) { if (BT == NULL) return 0; int leftH = GetHeight(BT->Left); ...

  5. sessionID是如何在客户端和服务器端传递的?

    sessionID是如何在客户端和服务器端传递的? 服务器初次创建session的时候后返回session到客服端(在返回头(response)中有setCookie),浏览器会把sessionnam ...

  6. 《VR入门系列教程》之20---使用Oculus移动端SDK

    使用Oculus移动端SDK     在基于安卓系统的GearVR上开发应用需要用到Oculus的移动端SDK,下面的网址可以下载SDK:http://developer.oculus.com     ...

  7. Soso(嗖嗖)移动 java 项目

    1.接口 通话服务 package Soso; // 接口 通话服务 public interface CallService { public abstract int call(int minCo ...

  8. context创建过程解析（一）之deployDescriptors

    总结:主要是创建Context对象,并且将默认context配置,host级别配置,context配置的值设置进去,设置docBase,如果是war包就解压到webapp的目录中,重新设置docBas ...

  9. java类加载器-Bootstrap、 ExtClassLoader、 AppClassLoader的关系

    1. 简单介绍 Bootstrap. ExtClassLoader.  AppClassLoader是java最根正苗红的类加载器. Bootstrap是本地代码编写的(例如C), ExtClassL ...

  10. LASSO原作者的论文，来读读看

    Regression Shrinkage and Selection via the lasso 众所周知,Robert Tibshirani是统计领域的大佬,这篇文章在1996年提出了LASSO,之 ...