下面来介绍一下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. 文本去重之MinHash算法——就是多个hash函数对items计算特征值，然后取最小的计算相似度

    来源:http://my.oschina.net/pathenon/blog/65210 1.概述     跟SimHash一样,MinHash也是LSH的一种,可以用来快速估算两个集合的相似度.Mi ...

  2. Atom插件及使用

    Atom比较好用的编辑工具之一,之前用过 HBuilder 和 Sublime Text ,个人感觉HBuider适合初级人们的人用. Atom好处之一是他的packages管理安装非常方便,你也可以 ...

  3. 关于c++中命名空间namespace

    一.定义命名空间: 步骤一:在.h文件中:namespace  ns{.......}//将定义的类和全局变量,全局函数写入花括号内. 步骤二:在.cpp文件中: using namespace ns ...

  4. C++中函数重载

    C++中函数重载使用顶层const修饰参数和不使用const修饰参数效果是一样的,如果定义了这样的重载函数会报函数重定义的错误. 追其原因,C++中的函数传递方式有三种,一种是值传递,就是拷贝,一种是 ...

  5. Struts2 - 异常处理: exception-mapping 元素

    异常处理: exception-mapping 元素 在action方法中添加 int i=1/0; 请求action后,结果为: 在struts.xml中添加异常处理:exception-mappi ...

  6. CMake简易入门

    使用CMake编译 CMake工具用于生成Makefile文件.用户通过编写CMakeLists.txt文件,描述构建过程(编译.连接.测试.打包),之后通过解析该文件,生成目标平台的Makefile ...

  7. NOIp2018集训test-10-17 (bike day3)

    发现自己gradully get moodier and moodier了 负面情绪爆发地越来越频繁,根本out of control,莫名其妙地就像着了魔一样 为什么用英语大概是因为今天早上早自习因 ...

  8. PythonPath在Windows 下的设置

    今天在调试Evernote SDK时, 遇到PythonPath的问题. 查了很多资料,有说用系统环境变量添加PythonPath, 有说在注册表中的PythonPath添加新Default字段, 但 ...

  9. redis的read error on connection错误解决

    昨日,公司php调用redis报错:read error on connection 2015-01-29 23:59:050.13330000,redis存放的是用户session. 在网上查询,大 ...

  10. RS485波特率问题

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/51683648 最近再做一个项目,发现485不能发送数据,感到非常奇怪!后来查阅相关 ...