//居中方法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. python处理Excel - xlrd xlwr openpyxl

    python处理Excel - xlrd xlwr openpyxl 1 xlrd和xlwt Todo: 使用xlrd和xlwt读写Excel文件的方法和示例代码,待续... 参考链接: Creati ...

  2. pytorch打印模型结构图

    import torchsummary from torchvision.models.resnet import * net = resnet18().cuda() print(net) 打印出来的 ...

  3. 简单的Json数据

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. Centos7 update dotnet 无法识别

    使用了yum update 后 原来好好的dotnet 用不了了 /usr/bin/dotnet 找不到 卸载重装都没法了.... 解决方法: 把dotnet 拷贝到 /usr/bin 下面去就好了 ...

  5. HTML学记笔记

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  6. wpf treeview 数据绑定 递归绑定节点

    1.先上效果 将所有节点加入ComboBox数据源,在ComboBox中选择时下方Treeview显示该节点下的子节点. 1.xaml文件,将以下代码加入界面合适位置 <StackPanel&g ...

  7. 关于Xamarin、Qml、数据绑定、MVC、MVVM 相关的散讲

    关于Xamarin.Qml.数据绑定.MVC.MVVM 相关的散讲 SURFSKY 2017.02 最近又在学习Xamarin了?为什么是“又”?有几个利好消息,让我重新拾起它: ()微软去年收购了X ...

  8. 3.JAVA基础复习——JAVA中的类与对象

    什么是对象: 就是现实中真实的实体,对象与实体是一一对应的,现实中每一个实体都是一个对象在. JAVA中的对象: Java中通过new关键字来创建对象. 类: 用JAVA语言对现实生活中的事物进行描述 ...

  9. 【shell】shuf命令提取文件的随机行

    shuf命令可以随机提取一个文本文件的不同行,输出到文件或者标准输出中. shuf 用法: shuf [选项]... [文件] 或者: shuf -e [选项]... [参数]... 或者: shuf ...

  10. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...