在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法

上代码

　　下面的是 结构代码

　　<div class="wrap">//此处为父组件 我们会设置父级的宽高并让其居中

　　<div class="center">//子组件我们要实现它的垂直居中 不设置他的宽高 宽高 都由下面的img引入的图片撑开

　　<img width="100px" src="img/logo.a68568a.png"/>

　　</div>

　　</div>

　　下面是样式代码

　　　　　　　.wrap{设置一个居中的外框

　　　　　　　　width: 500px;

height: 400px;

border: 1px solid black;

margin: 0 auto;

text-align: center;//水平居中

}

.wrap:before{//设置一个宽度为0的伪类为什么要设置这个伪类 起时这个伪类起到了一个对准线的作用

display: inline-block;

content: '';

height: 100%;

width: 0;

vertical-align: middle;//垂直居中

}

.center{//这个时候 在对我们的centerdiv 设置 vertical-align: middle 就可垂直居中了

vertical-align: middle;

display: inline-block;

}

img{

vertical-align: top;

}

　　二 css3 transform解决

　　　　.wrap{//一个固定宽高 居中的外框

width: 500px;

height: 400px;

border: 1px solid black;

margin: 0 auto;

}

　　　　.center{//我们的center div 还是写成inline-block 的样式

　　　　　　　　　position: relative;

　　　　　　　　　　//相对定位 通过相对定位left  top 值的设置来让center div 的左上角的位置 为wrap 的中心

　　　　　　　　　　//但这个时候我们还不是完全垂直居中 因为我们的center div 本身也有自适应的宽高 这个时候 就要用到transform了

　　　　　　　　　　//通过translateX(-50%) translateY(-50%) 让center 本身在x轴y轴上偏移50% 达到真正的居中（轴心点默认在左上角）

　　　　　　　　　　//注意transform各个浏览器有不同的前缀并且不兼容ie8 以下

top: 50%;

left: 50%;

display: inline-block;

-webkit-transform: translateX(-50%) translateY(-50%);

}

img{

vertical-align: top;

}

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">document{height: 100%;}html{height: 100%;}body{height: 100%;overflow: hidden;margin: 0;}#bigwrap{width: 100%;height: 100%;text-align: center;}#bigwrap:before{height: 100%;width: 0;vertical-align: middle;content: '';display: inline-block;}.wrap{width: 500px;height: 400px;border: 1px solid black;margin: 0 auto;text-align: center;}.wrap:before{display: inline-block;content: '';height: 100%;width: 0;vertical-align: middle;}.center{vertical-align: middle;display: inline-block;}img{vertical-align: top;}/*.center {   position: fixed;  top: 50%;  left: 50%;  background-color: #000;  width:50%;  height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);}*/</style></head><body><!--<div id="bigwrap">--><div class="wrap"><div class="center"><img width="100px" src="img/logo.a68568a.png"/></div></div></div></body></html>

css 宽高自适应的div 元素 如何居中 垂直居中的更多相关文章

  1. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  2. jquery操作html中图片宽高自适应

    在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示. $("#myTab0_Cont ...

  3. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  4. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  6. css未知宽高的盒子div居中的多种方法

    不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...

  7. css+background实现 图片宽高自适应，拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                      ...

  8. 翻屏类 h5 适配方案：解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  9. CSS宽高背景介绍

    本萌新还未毕业,在一家外包公司干了一个月,因烦恼日常琐事任务,深感外包之坑,以及上班路途艰辛,特转战erp实施,继写日常随笔,望来日屌丝逆袭,走上人生巅峰. 若有错误,请前辈指点迷津,在下谢过. &l ...

随机推荐

  1. Linux中SVN的备份与恢复

    linux中SVN备份有三种方式 1.svnadmin dump 是官方推荐的备份方式,优点是比较灵活,可以全量备份也可以增量备份,并提供版本恢复机制. 缺点是版本数过大,增长到数万以上,那么dump ...

  2. vue-axios基本用法

    废话不多说,直接搞事搞事. 首先安装axios: 1):npm install 2):npm install vue-axios --save 3):npm install qs.js --save ...

  3. bootstrap 模态框（modal）插件使用

    今天用户登陆时,在原网页上弹出新登陆窗口,发现使用的是modal插件,记录下该插件的使用方法,手写强化下. 首先,模态框(modal)是覆盖在父窗体上的子窗体,目的是显示来自一个单独的源的内容,可以在 ...

  4. Alpha冲刺No.5

    一.站立式会议 在助教帮助下,优先解决404的问题,将demo移植到自己项目上. 进一步制作界面. 将已做好的内容,移植到手机做部分测试,能够在同一路由子网内登录数据库. 二.实际项目进展 已经解决了 ...

  5. oracle删除某个用户所有表(转)

    1. select   'Drop   table   '||table_name||';'             from   all_tables           where   owner ...

  6. scrapy 模拟登陆

    import scrapy import urllib.request from scrapy.http import Request,FormRequest class LoginspdSpider ...

  7. 使用genstring和NSLocalizedString实现App文本的本地化

    OS提供了简便的方法来实现本地化,其中用的最多的就是NSLocalizedString. 首先查看下NSLocalizedString是什么: #define NSLocalizedString(ke ...

  8. PostMan 调用WCF Rest服务

    问题描述: 现在有已有的WCF服务,但是ajax是不能请求到这个服务的: 需要把WCF转成WCF REST 的风格. 以下是从WCF转 WCF REST的步骤 1.首先在接口定义的地方加上 请求 We ...

  9. 从同步阻塞聊到Java三种IO方式

    本文总结自 https://zhuanlan.zhihu.com/p/34408883, https://www.zhihu.com/question/19732473中愚抄的回答, http://b ...

  10. Python之旅_第一章Python入门

    一.编程语言分类 1.机器语言:即计算机能听懂的二进制语言,0000 0001,直接操控硬件: 2.汇编语言:简写的英文标识符代替二进制语言,本质同样是直接操控硬件: 3.高级语言:用更贴近人类的语言 ...