下面来介绍一下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. web项目路径如何更改

  2. Netty组件理解（转载）

    转载的文章,写的非常好.   一.先纵览一下Netty,看看Netty都有哪些组件?        为了更好的理解和进一步深入Netty,我们先总体认识一下Netty用到的组件及它们在整个Netty架 ...

  3. nodejs 上传图片(服务端输出全部代码)

    下面代码,全部都是nodejs端的,不用客户端代码.也就是,选择图片的form表单以及上传完毕预览图片的html,都是由node服务端输出的. 1 启动代码:(node upload.js) var ...

  4. Impala的JDBC无法连接

    这是因为客户端连接的JDBC是Impala的master机器,而不是DataNode:因为JDBC的服务宿主是Impalad,而Impalad只是部署在DataNode

  5. 51nod 1301 集合异或和——异或dp

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1301 好题!看了TJ才会. 因为是不可重集合,所以当然有前 i 个 ...

  6. 研华 RISC超低功耗3.5”单板电脑

    产品简介: 这是一款搭载TI Sitara AM3358 Cortex-A8 1GHz高性能处理器的RISC 3.5”单板电脑.RSB-4221是一款稳定可靠.性能强大的低功耗平台,专为各种需要丰富I ...

  7. css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  8. jQuery 文档操作 - html() 方法

    1.转自:http://www.w3school.com.cn/jquery/manipulation_html.asp 设置所有 p 元素的内容: <html> <head> ...

  9. IPC编程之消息队列

    本地的进程间通信(IPC)有很多种方式,但可以总结为下面3类: 1.消息传递(管道.FIFO.消息队列) 2.同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 3.共享内存(匿名的和具名的) ...

  10. 杭电acm 1033题

    Problem Description For products that are wrapped in small packings it is necessary that the sheet o ...