//居中方法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. openssh-win64 on windows2016 ssh pub key config

    DO NOT follow the official M$ documentation at https://docs.microsoft.com/en-us/windows-server/admin ...

  2. PyAutoGUI使用

    PyAutoGUI是一个纯Python的GUI自动化工具,其目的是可以用程序自动控制鼠标和键盘操作,利用它可以实现自动化任务,再也不用担心有重复枯燥的任务了. 安装: pip install pyau ...

  3. G面经Prepare: Longest All One Substring

    give a string, all 1 or 0, we can flip a 0 to 1, find the longest 1 substring after the flipping 这是一 ...

  4. python模块学习之hashlib模块学习

    # 加密模块 import hashlib # md5 加密 md5 # 1.初始化md5模块 生成md5对象 # 2.引入要加密的数据 update # 3.获取加密值 hexdigest m = ...

  5. spring boot中使用@Async实现异步调用任务

    本篇文章主要介绍了spring boot中使用@Async实现异步调用任务,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 什么是“异步调用”? “异步调用”对应的是“同步 ...

  6. c++ 单元测试框架 gmock 深度剖析

    c++ 单元测试框架 gmock 深度剖析 随着微服务和CI的流行,在目前的软件工程领域中单元测试可以说是必不可少的一个环节,在TDD中,单元测试更是被提高到了一个新的高度.但是很多公司由于很多不同的 ...

  7. centos7 安装oracle 11g数据库

    1.新建oracle用户 groupadd oracle useradd -g oracle oracle .修改操作系统核心参数 在Root用户下执行以下步骤: 1)修改用户的SHELL的限制,修改 ...

  8. sitecore 8.2 item属性查询

    查询: query:/sitecore/content/[@@templatename='Homepage'] 结果: home (name: home, path: /sitecore/conten ...

  9. JQuery选择器，动画，事件和DOM操作

    JQuery是由JS封装的一些方法,供我们调用,可以快速的实现某些JS功能,实际是JS编写的方法包 将JQuery文件放到JS文件夹下,然后引用到<head></head>中 ...

  10. 前端使用node.js的http-server开启一个本地服务器

    前端使用node.js的http-server开启一个本地服务器 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时 ...