下面来介绍一下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. UML图之例图

    用例图主要说明的是谁要使用系统,以及他们使用该系统可以做些什么,帮助开发团队以一种可视化的方式理解系统的功能需求. 一个用例图包含了多个模型元素,如系统.参与者和用例,并且显示这些元素之间的各种关系, ...

  2. redisCheckMem脚本

    最近维护的redis cluster需要扫描每个实例的内存使用率,首先我们需要获取实例已经使用的内存,获取实例的最大内存配额,两个值相比就能获取到内存使用比例. 实例的最大内存获取方法: $REDIS ...

  3. 第k小和（搜索）

    Description [问题描述] 从n个数中选若干(至少1)个数求和,求所有方案中第k小的和(和相同但取法不同的视为不同方案).[输入格式]    第一行输入2个正整数n,k.    第二行输入这 ...

  4. docker异常处理

    Error running DeleteDevice dm_task_run failed重启docker即可 Error starting daemon: error initializing gr ...

  5. centos下升级mysql5.5.47到5.7.14操作过程

    一． 查看已安装Mysql基础信息通过mysql –V 查看下mysql版本可以通过命令find / -name mysql 得到下面信息 1.安装目录[root@jjxnhd-192-10 mysq ...

  6. SqlServer2005的备份和还原（不同服务器）

    1 备份数据库NorthSJ 进入服务器,进入SqlServer2005,选择数据库NorthSJ进行备份

  7. AI设计的若干规则阐述

    转自:http://www.gameres.com/491742.html 一般来讲,网络游戏的AI历来就是很简单的AI.相比之下,很多单机游戏的AI就要得复杂一些.而笔者并未从事过大型单机游戏的AI ...

  8. Python-requests取消SSL验证的警告InsecureRequestWarning解决办法

    使用requests模块请求一个证书无效的网站的话会直接报错 可以设置verify参数为False解决这个问题 # -*- coding:utf-8 -*- __author__ = "Mu ...

  9. Qt 按顺序保存多个文件

    void MainWindow::on_pushButtonSnap_clicked() { ]; sprintf(image_name, "%s%d%s", "C:/i ...

  10. C#调用ODBC连接SQL Server数据库的存储过程

    OdbcConnection con = new OdbcConnection("Driver={SQL Server};server=PC-200201070359;uid=sa;pwd= ...