1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>水平居中垂直居中方法</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             background: pink;
  11.         }
  12.         /*第一种方法*/
  13.         .box1{
  14.             display: table-cell;
  15.             vertical-align: middle;
  16.             text-align: center;
  17.         }
  18.         /*第二种方法*/
  19.         .box2{
  20.             display: flex;
  21.             justify-content:center;
  22.             align-items:Center;
  23.         }
  24.         /*第三种方法*/
  25.         .box3 span{
  26.           width: 200px;
  27.           height: 200px;;
  28.           background: pink;
  29.           overflow: auto;
  30.           margin: auto;
  31.           position: absolute;
  32.           top: ; left: ; bottom: ; right: ;
  33.         }
  34.         /*第四种方法*/
  35.         .box4 span{
  36.             position: absolute;
  37.             top:%;
  38.             left:%;
  39.             width:%;
  40.             transform:translate(-%,-%);
  41.             text-align: center;
  42.         }
  43.         /*第五种方法*/
  44.         .box5 {
  45.             display: flex;
  46.             text-align: center;
  47.         }
  48.         .box5 span{
  49.             margin: auto;
  50.         }
  51.         /*第六种方法*/
  52.         .box6{
  53.           text-align:center;
  54.           font-size:;
  55.         }
  56.         .box6 span{
  57.           vertical-align:middle;
  58.           display:inline-block;
  59.           font-size:16px;
  60.         }
  61.         .box6:after{
  62.           content:'';
  63.           width:;
  64.           height:%;
  65.           display:inline-block;
  66.           vertical-align:middle;
  67.         }
  68.         /*第七种方法*/
  69.         .box7{
  70.             display: -webkit-box;
  71.             -webkit-box-pack:center;
  72.             -webkit-box-align:center;
  73.             -webkit-box-orient: vertical;
  74.             text-align: center
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="box1">
  80.         <span>垂直居中</span>
  81.     </div>
  82.     <hr>
  83.     <div class="box2">
  84.         <span>垂直居中2</span>
  85.     </div>
  86.     <hr>
  87.     <div class="box3">
  88.         <span>垂直居中3</span>
  89.     </div>
  90.     <hr>
  91.     <div class="box4" style="position: relative;">
  92.         <span>垂直居中4</span>
  93.     </div>
  94.     <hr>
  95.     <div class="box5">
  96.         <span>垂直居中5</span>
  97.     </div>
  98.     <hr>
  99.     <div class="box6">
  100.         <span>垂直居中6</span>
  101.     </div>
  102.     <hr>
  103.     <div class="box7">
  104.         <span>垂直居中7</span>
  105.     </div>
  106. </body>
  107. </html>

css 水平居中垂直居中的几种方法的更多相关文章

  1. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  2. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  3. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  4. CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...

  5. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  6. 纯CSS实现垂直居中的几种方法

    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...

  7. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  8. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  9. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

随机推荐

  1. 不在折腾---hbase-0.96.2-hadoop2

    首先安装好zookeeper集群 上传hbase安装包 解压 配置hbase集群,要修改3个文件 * 修改hbase-env.sh 设置JAVA_HOME: export JAVA_HOME=... ...

  2. Bug总结流程

    小明入职已有两年,期间测试能力已不知不觉成长许多,得到了Leader大熊的高度认可.回首这两年间,小明对"Bug总结流程"印象最为深刻,他对这个流程的认识在不断改变着:从最初的好奇 ...

  3. Java数组扩容算法及Java对它的应用

    1)Java数组对象的大小是固定不变的,数组对象是不可扩容的.利用数组复制方法可以变通的实现数组扩容.System.arraycopy()可以复制数组.Arrays.copyOf()可以简便的创建数组 ...

  4. js倒计时跳转页面

    var t=10; setInterval(function refer(){ if(t>0){ document.getElementById("em").innerHTM ...

  5. 初始JavaScript

    本文是笔者在看廖雪峰老师的JavaScript教程时的总结 一.加载 JavaScript           1.直接在html语句中写入JavaScript语句           2.在html ...

  6. thinkPHP的用法之M

    M方法 //添加 $res = M('comment')->add($data); //成功返回新增ID,失败返回false //删除 M('myop_myinvite')->where( ...

  7. AutoCAD安装失败

    问题一: Installing .NET Framework Runtime 4.0: D:\安装包\CAD\cad2012(x64)\Map3D2012(x64)\3rdParty\NET\4\wc ...

  8. 1. Two Sum I & II & III

    1. Given an array of integers, return indices of the two numbers such that they add up to a specific ...

  9. PDF 补丁丁 0.5.0.2731 发布（增加去除页面表单和链接水印功能）

    新的版本增加了简单的删除表单和链接批注的功能,使用该功能可去掉某些软件打上的水印. 在 PDF 文档选项中选中“清除页面所有表单”和“清除页面所有链接批注”项后,程序将会删除页面的表单和链接批注. 效 ...

  10. 如何获取域名的ip地址