//居中方法1

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   margin: auto;

   width: 346px;

   height: 56px;

//居中方法2

   position: absolute;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);

CSS之垂直水平居中方法的更多相关文章

  1. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  2. css实现垂直水平居中的方法（个数不限）？

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  3. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  4. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  5. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  6. css文本垂直水平居中

    一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...

  7. CSS垂直水平居中方法整理

    CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...

  8. Css实现垂直水平居中的六种方法

    经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...

  9. css实现垂直水平居中的方法

    html结构: <div class="box"> <div>垂直居中</div> </div> 方法1:display:flex ...

随机推荐

  1. MATLAB绘制函数图

    序言 Matlab可以根据用户给出的数据绘制相应的函数图.对于单个2D函数图,需要给出一个行向量x作为函数图上离散点集的横坐标,以及一个与x列数一样的横坐标y作为函数图上点集的纵坐标. 向量x和y的取 ...

  2. os.path.dirname使用方法

    import os path1=os.path.abspath(__file__) print(path1)#当前文件的绝对路径 path2=os.path.dirname(os.path.abspa ...

  3. linux 消息队列

    消息队列,这个可是鼎鼎大名,经常在某些地方看见大家那个膜拜,那个,嗯,那个... 那就给个完整的例子,大家欣赏就行,我一直认为不用那个,嗯@ 这个队列的最大作用就是进程间通信,你要非搞个持久化,那也行 ...

  4. 接口自动化框架(java)--3.get,delete请求,Excel管理多种请求类型

    这套框架的报告是自己封装的 每种请求类型放入不同的sheet中,就可以避免新建太多的excel去做数据驱动. XSSFSheet类提供了一个读取sheet的方法,getSheetAt(int),通过下 ...

  5. c# 设置开机启动

    private static RegistryKey _rlocal = Registry.LocalMachine.CreateSubKey(@"SOFTWARE\Microsoft\Wi ...

  6. mysql获取连接connection失败

    好久不写jdbc了,今天写了个小东西,数据库连接失败,错误信息如下: java.sql.SQLException: The server time zone value '???ú±ê×??±??' ...

  7. 用requests库和BeautifulSoup4库爬取新闻列表

    import requests from bs4 import BeautifulSoup url='http://news.gzcc.cn/html/xiaoyuanxinwen/' res=req ...

  8. windows之电脑开机出现 this product is covered by one or more of the following prtents

    电脑开机出现 this product is covered by one or more of the following prtents 有次意外断电后就每次都出现这个提示,然后要等检查完才能进入 ...

  9. textbox 未

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  10. PHP 不同类型之间的松散和严格比较

    原始数据类型 在比较之前先简单介绍一下PHP的9种原始数据类型,包括 四种标量类型: boolean(布尔型) integer(整型) float(浮点型,也称作 double) string(字符串 ...