<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平居中垂直居中方法</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            background: pink;

        }

        /*第一种方法*/

        .box1{

            display: table-cell;

            vertical-align: middle;

            text-align: center;

        }

        /*第二种方法*/

        .box2{

            display: flex;

            justify-content:center;

            align-items:Center;

        }

        /*第三种方法*/

        .box3 span{

          width: 200px;

          height: 200px;;

          background: pink;

          overflow: auto;

          margin: auto;

          position: absolute;

          top: ; left: ; bottom: ; right: ;

        }

        /*第四种方法*/

        .box4 span{

            position: absolute;

            top:%;

            left:%;

            width:%;

            transform:translate(-%,-%);

            text-align: center;

        }

        /*第五种方法*/

        .box5 {

            display: flex;

            text-align: center;

        }

        .box5 span{

            margin: auto;

        }

        /*第六种方法*/

        .box6{

          text-align:center;

          font-size:;

        }

        .box6 span{

          vertical-align:middle;

          display:inline-block;

          font-size:16px;

        }

        .box6:after{

          content:'';

          width:;

          height:%;

          display:inline-block;

          vertical-align:middle;

        }

        /*第七种方法*/

        .box7{

            display: -webkit-box;

            -webkit-box-pack:center;

            -webkit-box-align:center;

            -webkit-box-orient: vertical;

            text-align: center

        }

    </style>

</head>

<body>

    <div class="box1">

        <span>垂直居中</span>

    </div>

    <hr>

    <div class="box2">

        <span>垂直居中2</span>

    </div>

    <hr>

    <div class="box3">

        <span>垂直居中3</span>

    </div>

    <hr>

    <div class="box4" style="position: relative;">

        <span>垂直居中4</span>

    </div>

    <hr>

    <div class="box5">

        <span>垂直居中5</span>

    </div>

    <hr>

    <div class="box6">

        <span>垂直居中6</span>

    </div>

    <hr>

    <div class="box7">

        <span>垂直居中7</span>

    </div>

</body>

</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. loadrunner json

    Action(){ web_custom_request("JRPT_WriteLog", //VuGen中树形视图中显示的名称 "Url=url", //请求 ...

  2. 不使用插件实现对WordPress默认编辑器的增强

    四处寻觅无果.无意看了一下wordpress官方的API函数.苍天有眼啊!原来,后台的编辑器可以插入很多增强功能.果断卸载掉CK and SyntaxHighlighter编辑器插件.事实上,Word ...

  3. 用excel做分组散点图

    散点图主要观察两组变量间的趋势和分布,如果变量多于两组,仍旧使用散点图的话,那所有点都会集中在同一显示区域内,使人无法准确判断,此时一般使用散点图矩阵进行两两比较.除此之外,如果并不关心组与组之间的关 ...

  4. 用socket实现ping功能（记录）

    /* 参考 http://bbs.csdn.net/topics/230001156 原文为win32版本 稍有改动,以适应mac与linux系统 */ #include <stdio.h> ...

  5. js解析网址获取需要的数据

    /** * 获取地址栏内容,返回pathnamearrneed对象 * @param {Object} len 从第几位开始获取你需要的值 */ function myLocationId(len) ...

  6. ES5——函数，对象，方法，this

    JS由表达式和语句组成 表达式:计算出一个值,但并不进行任何操作,不改变计算机运行状态 语句:包括 声明语句,赋值语句,控制结构 函数,对象,方法,this 数组和对象:是两个非常重要的数据类型 函数 ...

  7. 第一种SUSE Linux IP设置方法

    第一种SUSE Linux IP设置方法ifconfig eth0 192.168.1.22 netmask 255.255.255.0 uproute add default gw 192.168. ...

  8. android 中调用接口发送短信

    android中可以通过两种方式发送短信 第一:调用系统短信接口直接发送短信:主要代码如下: //直接调用短信接口发短信 SmsManager smsManager = SmsManager.getD ...

  9. 【Javascript】重新绑定默认事件

    更多内容,请移步 JSCON-简时空 在有一种场景下,你想先屏蔽掉默认的系统事件,而在特定条件下又重新绑定回去. [场景]H5页面,动画欢迎界面,共6帧:想在前5帧中屏蔽掉默认的touchmove事件 ...

  10. 关于easyui遇到的一些问题

    一.TreeGrid在IE浏览器中不能刷新 在创建TreeGrid的时候将method: 'get' 改成 method: 'post' , 然后再$('#ProductGrid').treegrid ...