水平居中和垂直居中的方案

先看HTML的骨架

后面的代码都是基于这个来写的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>Document</title>

</head>

<link rel="stylesheet" href="./style.css">

<body>

    <div class="box vertical align"></div>

</body>

</html>

水平居中

  1. 通过 margin 水平居中

    /* 1. 通过margin 水平居中 */
    
.box {
    
    width: 200px;
    
    height: 200px;
    
    background-color: orange;
    
}
    
.align {
    
    margin: 0 auto;
    
}

  2. 通过 position 和 transform 水平居中

    /* 2.通过 position 和 transform 水平居中 */
    
.box {
    
    width: 200px;
    
    height: 200px;
    
    background-color: orange;
    
}
    
.align {
    
    position: relative;
    
    left: 50%;
    
    transform: translateX(-50%);
    
}

  3. 通过flex水平居中

    body {
    
    display: flex;
    
    justify-content: center;
    
}

  4. 通过 text-align:center 水平居中

    注意:使用text-align的时候,子元素要设置为行内块元素,是利用了行内元素的特性

    body {
    
    text-align: center;
    
}
    
.box {
    
    display: inline-block;
    
    width: 200px;
    
    height: 200px;
    
    background-color: orange;
    
}

垂直居中

  1. flex布局垂直居中

    可以在父类上加 align-item:center实现垂直居中

    body {
    
    height: 100vh;
    
    display: flex;
    
    align-items: center;
    
}

    也可以在子类元素上加 align-self:center 实现垂直居中

    .box {
    
    align-self: center;
    
    width: 200px;
    
    height: 200px;
    
    background-color: orange;
    
}

  2. 通过position和transform 来垂直居中

    /* 第二种方案 position和transform */
    
.vertical{
    
    position: relative;
    
    top: 50%;
    
    transform: translateY(-50%);
    
}

绝对居中

  1. flex布局实现绝对居中

    body {
    
    height: 100vh;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
}

  2. 通过 position和transform 实现绝对居中


    
/* 第二种方案 position和transform */
    
.box {
    
    position: relative;
    
    top: 50%;
    
    left: 50%;
    
    transform: translate(-50%, -50%);
    
}

Spirit带你了解CSS各个方向的居中方案的更多相关文章

  1. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  2. mvc后台传到前台的值带html标签css（解决方法）

    mvc后台传到前台的值带html标签css MVC中要用:@Html.Raw(后台数据库取的值); 或者MvcHtmlString.create();

  3. Spirit带你了解如何安全引入第三方资源

    Spirit带你了解如何安全的引入第三方资源 本文介绍一下如何安全的引入第三方资源 同源策略(SOP) 首先我们来了解一下什么是同源策略,下面的是wiki百科的定义 同源策略是指Web浏览器中,允许某 ...

  4. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  5. Js配合CSS实现的图片居中

    CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了.本例就是CSS结合JavaScript实现的图片垂直.水平方向 ...

  6. CSS布局之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

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

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

  8. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  9. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

随机推荐

  1. innodb是如何存数据的？yyds

    前言 如果你使用过mysql数据库,对它的存储引擎:innodb,一定不会感到陌生. 众所周知,在mysql8以前,默认的存储引擎是:myslam.但mysql8之后,默认的存储引擎已经变成了:inn ...

  2. [转]C# 互操作性入门系列(二)：使用平台调用调用Win32 函数

    传送门 C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列(二):使用平台调用调用Win32 函数 C# 互操作性入门系列(三):平台调用中的数据封送处理 ...

  3. 迭代器 与 foreach 的区别

    迭代器的常见运用--Eg:有一组数据 需要对每个符合条件的数据 进行记录 static void Main() { int[] s = new int[] { 1, 2, 8 }; foreach ( ...

  4. Qt元对象和属性系统详解

    Qt 是一个用标准 C++ 编写的跨平台开发类库,它对标准 C++ 进行了扩展,引入了元对象系统.信号与槽.属性等特性,使应用程序的开发变得更高效. 本节将介绍 Qt 的这些核心特点,对于理解和编写高 ...

  5. SpringBoot2.0 防止XSS攻击

    一:什么是XSS XSS攻击全称跨站脚本攻击,是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中. 你可以自己做个简单尝试: 1. 在任何一个表单内,你输 ...

  6. bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动，select选中跳转

    bootStrap模态框与select2合用时input不能获取焦点 在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 把 ...

  7. Int 2e 与 Sysenter区别

    参考:张银奎<软件调试>第八章 Int 2e: Windows将2e号向量专门用作系统调用,在启动早起初始化中断描述表时便注册好了适合的服务例程.因此当NtDll中的NtReadFile发 ...

  8. Ubuntu 16.04LTS安装flashplayer

    转载自http://www.linuxdiyf.com/linux/20084.html 在安装Ubuntu 16.04LTS后,播放有视频的网页时,总提示你要安装缺失的插件,在 ubuntu 系统下 ...

  9. tensorflow models flags 初步使用

    参考官方仓库:https://github.com/tensorflow/models/tree/master/official/utils/flags 测试Demo代码如下: from absl i ...

  10. [源码解析] 深度学习流水线并行之PopeDream(1)--- Profile阶段

    [源码解析] 深度学习流水线并行之PopeDream(1)--- Profile阶段 目录 [源码解析] 深度学习流水线并行之PopeDream(1)--- Profile阶段 0x00 摘要 0x0 ...