在我们 编写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. APS期刊投稿准备: REVTex格式

    APS是American Physics Society的简称.旗下比较有影响力的期刊有: "pra, prb, prc, prd, pre, prl, prstab, prstper, o ...

  2. WEB端线上偶现问题如何复现？

    1.抓取出现问题的日志,还原操作过程,分析 每个过程中数据是否正常?是否有重复请求 2.询问当时操作员执行了哪些操作,尽可能多的了解事发经过 3.通过查看日志,数据库等信息,找到发生问题的节点, 比如 ...

  3. Nginx出现500 Internal Server Error 错误的解决方案

    500(服务器内部错误) 服务器遇到错误,无法完成请求. 501(尚未实施) 服务器不具备完成请求的功能.例如,当服务器无法识别请求方法时,服务器可能会返回此代码. 502(错误网关) 服务器作为网关 ...

  4. php 类接口继承练习

    <?php /** * @hypo 接口的特性:接口中定义的所有方法都必须是public 接口的实现:一个接口可以使用implements操作符,类中必须实现接口中的所有方法,否则会报fatal ...

  5. Python 自学 之 String 常见操作

    这是在Python 3.5.3版本下测试的.# Author Taylor_Manitoname ="my name is alex"#capitalized 大写的print(& ...

  6. Hibernate学习笔记一 使用idea开发工具搭建框架

    1.导包,包下载地址:http://hibernate.org/orm/downloads/ 2.创建数据库,准备表,实体.示例: CREATE TABLE `cst_customer` ( `cus ...

  7. JavaScript(第二十三天)【事件入门】

    JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码.   一．事件介绍 事件一般是用于浏览器和用户操作进行交互.最早是IE和 ...

  8. 极其简单的帮你理解ORM中的关联关系

    ORM对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转 ...

  9. [福大软工] W班 第2次成绩排行榜

    作业链接 https://edu.cnblogs.com/campus/fzu/FZUSoftwareEngineering1715W/homework/866 评分细则 本次个人项目分数由三部分组成 ...

  10. Beta 凡事预则立

    写在Beta冲刺前 关于组长是否重选的议题和结论 总体结论 组长无需更换 队内无人替代 理由 当前组长能够较好的号召和组织团队成员进行工作 当前组长能够对项目有合理的规划 当前组长被大家一致认可可以继 ...