下面来介绍一下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. html设置编码

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  2. guava_学习_00_资源帖

    一.精选 1.Google Guava 官方教程 二.参考资源 1.Google Guava官方教程(中文版) 2.使用Guava编写优雅代码 3.Google guava工具类的介绍和使用

  3. php和mysql连接方式(短 长 池)

    一个php work进程只能处理一个请求,当完成一个请求了,才能处理下一次的请求 2.短连接: 执行到php关闭mysql连接的代码时,就断开,否则在处理本次请求结束的时候,释放mysql连接 实验: ...

  4. Python解决中文字符的问题

    from __future__ import unicode_literals print(type("test")) #<type 'unicode'> Chinat ...

  5. 浅谈Huffman树

    所谓Huffman树,就是叶子结点带权的\(K\)叉树,假设每个叶子的权值为\(v\),到根的距离为\(dep\),那么最小化\(\sum v_i*dep_i\)就是\(Huffman\)树的拿手好戏 ...

  6. poj 3469 Dual Core CPU——最小割

    题目:http://poj.org/problem?id=3469 最小割裸题. 那个限制就是在 i.j 之间连双向边. 根据本题能引出网络流中二元关系的种种. 别忘了写 if ( x==n+1 ) ...

  7. bzoj 2535 & bzoj 2109 航空管制 —— 贪心+拓扑序

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2535 https://www.lydsy.com/JudgeOnline/problem.p ...

  8. Logstash 2.0.0 beta2 发布，开源日志管理

    Logstash 是一个应用程序日志.事件的传输.处理.管理和搜索的平台.你可以用它来统一对应用程序日志进行收集管理,提供 Web 接口用于查询和统计. Logstash 现在是 ElasticSea ...

  9. 1 ELK 简介

    日志主要包括系统日志.应用程序日志和安全日志,系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因.经常分析日志可以了解服务器的负荷,性能安全性,从而及时采取措施纠 ...

  10. 转载：PLSQL Developer使用技巧整理

    Shortcut(快捷方式): Edit/Undo     Ctrl+Z Edit/Redo     Shift+Ctrl+Z Edit/PL/SQL Beautifier  Ctrl+W   (自定 ...