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

先看HTML的骨架

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <link rel="stylesheet" href="./style.css">
  12. <body>
  13.     <div class="box vertical align"></div>
  14. </body>
  15. </html>

水平居中

  1. 通过 margin 水平居中

    1. /* 1. 通过margin 水平居中 */
    2. .box {
    3.     width: 200px;
    4.     height: 200px;
    5.     background-color: orange;
    6. }
    7. .align {
    8.     margin: 0 auto;
    9. }

  2. 通过 position 和 transform 水平居中

    1. /* 2.通过 position 和 transform 水平居中 */
    2. .box {
    3.     width: 200px;
    4.     height: 200px;
    5.     background-color: orange;
    6. }
    7. .align {
    8.     position: relative;
    9.     left: 50%;
    10.     transform: translateX(-50%);
    11. }

  3. 通过flex水平居中

    1. body {
    2.     display: flex;
    3.     justify-content: center;
    4. }

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

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

    1. body {
    2.     text-align: center;
    3. }
    4. .box {
    5.     display: inline-block;
    6.     width: 200px;
    7.     height: 200px;
    8.     background-color: orange;
    9. }

垂直居中

  1. flex布局垂直居中

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

    1. body {
    2.     height: 100vh;
    3.     display: flex;
    4.     align-items: center;
    5. }

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

    1. .box {
    2.     align-self: center;
    3.     width: 200px;
    4.     height: 200px;
    5.     background-color: orange;
    6. }

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

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

绝对居中

  1. flex布局实现绝对居中

    1. body {
    2.     height: 100vh;
    3.     display: flex;
    4.     align-items: center;
    5.     justify-content: center;
    6. }

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


    2. /* 第二种方案 position和transform */
    3. .box {
    4.     position: relative;
    5.     top: 50%;
    6.     left: 50%;
    7.     transform: translate(-50%, -50%);
    8. }

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. STM32—时钟树（结合系统时钟函数理解）

    时钟树的概念: 我们可以把MCU的运行比作人体的运行一样,人最重要的是什么?是心跳! 心脏的周期性收缩将血液泵向身体各处.心脏对于人体好比时钟对于MCU,微控制器(MCU)的运行要靠周期性的时钟脉冲来 ...

  2. 【LeetCode】26. 删除有序数组中的重复项

    26. 删除有序数组中的重复项 知识点:数组:排序:双指针: 题目描述 给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度. 不要使用额外的 ...

  3. centos7.5 安装jdk环境

    最新下载地址 历史下载地址 [root@manage ~]# mkdir /application/ [root@manage ~]# tar -xf jdk-8u112-linux-x64.gz - ...

  4. SpringBoot获取请求的参数

    说明 SpringBoot 为我们封装了许多,简便的获取请求参数的方法! 1.获取无注解获取请求参数 请求地址:http://192.168.0.115:8080/myproject/test/noA ...

  5. docker 安装部署 redis（配置文件启动）

    获取 redis 镜像 docker pull redis:4.0.12 docker images 创建容器 创建宿主机 redis 容器的数据和配置文件目录 # 创建宿主机 redis 容器的数据 ...

  6. spring cloud 项目

    ### 项目需求 客户端:针对普通用户,用户登录.用户退出.菜品订购.我的订单. 后台管理系统:针对管理员,管理员登录.管理员退出.添加菜品.查询菜品.修改菜品.删除菜品.订单处理.添加用户.查询用户 ...

  7. Tcp三次握手中细节

    TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接,如下图所示.主机A为客户机,主机B为服务器 说明:(1)第一次握手:建立连接时,客户端A发送SYN包(SYN=j)到服务器B ...

  8. 【java web】过滤器filter

    一.过滤器简介 过滤器filter依赖于servlet容器 所谓过滤器顾名思义是用来过滤的,Java的过滤器能够为我们提供系统级别的过滤,也就是说,能过滤所有的web请求, 这一点,是拦截器无法做到的 ...

  9. 创建File类 及 this.getClass().getResource()方法 用到的文件路径的问题

    1 package test; 2 3 import java.io.*; 4 import java.util.Scanner; 5 6 public class TestResource { 7 ...

  10. Linux centos 安装 maven 3.5.4

    一.maven下载 1.官方下载 打开网址:http://maven.apache.org/download.cgi 下拉滚动条,找到标记处并点击 选择自己想要的版本,我这里选择的是 3.5.4,然后 ...