下面来介绍一下web端页面最常见的居中方式

页面的基本结构：一个简单的div

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    :root , html{

        height: 100%;

        width: 100%;

    }

    div{

        width: 100px;

        height: 100px;

        background: red;

    }

    </style>

</head>

<body>

    <div class="mid"></div>

</body>

</html>

</html>

1.利用position

    :root , html{

        height: 100%;

        width: 100%;

    }

    div{

        width: 100px;

        height: 100px;

        background: red;

    }

    .mid{

        position: absolute;

        top: 50%;

        left: 50%;

        /* 通过top 50% 和 left 50% 让div的左顶点居中 */

    }

　　几种让div自身平移一半的方法

　　　　1.对于已知宽高

　　　　通过margin平移自身大小的一半　

.mid{

        position: absolute;

        top: 50%;

        left: 50%;

        margin-left: -50px;

        margin-top:-50px;

    }

　　　　通过calc函数进行计算

.mid{

        position: absolute;

        top:calc(50% - 50px);

        left:calc(50% - 50px);

    }

　　　　通过transform中的translate

.mid{

        position: absolute;

        top:50%;

        left:50%;

        transform: translate(-50%,-50%);

    }

2.利用flex弹性盒模型

body{

        width: 100%;

        height:100%;

        display: flex;

        align-items:center;

        justify-content: center;

    }

3.利用margin:auto 加position 四个方向为0

四个方向设置为0，用

.mid{

        position: absolute;

        margin:auto;

        left:;

        top:;

        bottom:;

        right:;

    }

4.利用table table-cell

利用table-cell可以使用vertical-align: middle实现垂直居中

再在其子元素里用margin实现垂直居中即可

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        :root,

        html {

            height: 100%;

            width: 100%;

        }

        body {

            width: 100%;

            height: 100%;

            display: table;

        }

        .wrapper {

            width: 100%;

            height: 100%;

            display: table-cell;

            vertical-align: middle;

        }

        .mid {

            margin:0 auto;

            width: 100px;

            height: 100px;

            background: red;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <div class="mid">

        </div>

    </div>

</body>

</html>

让文字在块级元素内水平垂直居中

<div class="mid">123</div>
.mid{

        width: 100px;

        height: 100px;

        text-align: center;

        line-height: 100px;

        background: red;

        }

垂直水平居中的方式就分享到这里。单独的垂直或者水平居中原理相同只要分开了用即可

以上就是常用的居中方式，最经常使用到的就是用盒模型的margin和flex弹性盒子来进行居中

也推荐使用这两种方式。

如果有任何的疑问欢迎一起交流讨论，后续如果还有什么其他的居中方式也会及时补充。

.mid{
position: absolute;
margin:auto;
left: ;
top: ;
bottom:;
right: ;
}

前端三部曲之Css-- 1（常见的居中方式）的更多相关文章

  1. 讨论CSS中的各类居中方式

    今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...

  2. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  3. css水平竖直居中方式

    CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...

  4. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  5. web前端-----第二弹CSS

    web前端之CSS样式 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ...

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  8. 前端常用得CSS代码分享

    前端常用得CSS代码分享 本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...

  9. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

随机推荐

  1. 关于unity3D的GL图像库的使用

    GL图象库 GL图象库是底层的图象库,主要功能是使用程序来绘制常见的2D与3D几何图形.这些图形具有一定的特殊性,他们不属于3D网格图形,只会以面的形式渲染.使用GL图象库,可在屏幕中绘制2D几何图形 ...

  2. js 定义hash类

    // JavaScript Documentfunction HashTable(){    this._hash={};    this._count=0;            /**    *添 ...

  3. C#子线程执行完后通知主线程

    其实这个比较简单,子线程怎么通知主线程,就是让子线程做完了自己的事儿就去干主线程的转回去干主线程的事儿. 那么怎么让子线程去做主线程的事儿呢,我们只需要把主线程的方法传递给子线程就行了,那么传递方法就 ...

  4. Java_基础_02_ThreadLocal

    二.参考资料 1.ThreadLocal 那点事儿 2.彻底理解ThreadLocal

  5. jQuery 参考手册 - 选择器

    jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元 ...

  6. Linux-iptables(2)

    iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables,因此理解如何配置iptables将会帮助你更有效地管理Linux防火墙.如果你是第一次 ...

  7. BEC listen and translation exercise 44

    But over the past 70 years or so, there's been a massive increase in one type of crime which was wha ...

  8. 配置 VS Code 调试 PHP

    配置 VS Code 调试 PHP 1.下载 xampp 集成服务器wampserver3.1.0-Apache2.4.7_PHP5.6.3-7.0.23-7.1.19_MySQL5.7.19_Mar ...

  9. HBase的bulkLoad

    HBase的BulkLoad有两种方式: thinrow的机制是flatmap把cell的信息进行flatmap:适合少于1万列的数据集:thinrow的涵义就是少行多列: bulkload的机制则是 ...

  10. bzoj 2096 [POI2004]ZAW——二进制枚举

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2069 可以把直接相连的点分成  从1点出的一部分  和  走向1点的一部分.多起点最短路就和 ...