感觉 CSS 有很多可以hack 的，好玩的地方。想了一个简单的，诡异的办法，让Div 中想展现的内容垂直居中。而不去使用 flexbox, JS, Less, Scss, rotate, before, after。可以在 container 头部塞一个与“内容区域”一样大小的 div，然后设置“内容区域”的 bottom 为父亲的 50%，最后计算下，会发现“内容区域”上下距离相等。 #container { position: relative;...
一般在做产品页面的时候，如果产品图片宽高定死的话，有的图片就会变形，如果把宽给个最大宽，高自适应的话有的图又会由于是个长方形高超出了容器，这样就不得不截掉一部分图。于是就想着，首先不管图片是个什么比例，不管它是宽远大于高或者高远大于宽，统一设置最大的宽高值，不让它超出容器，并且这样处理图片不会变形。接下来想怎么处理图片大小不定，在固定容器中水平垂直居中的问题。 参考链接： 张鑫旭：大小不固定的图...
1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。 看实现代码： body{margin:0;padding:0} /*定位父级div水平垂直居中*/ .body_main{ width:200px; height: 300px; background-color: #3091E5; margin:-150px 0 0 -100px; top:50%; left:50%; position: absolute; } /*定位水平div垂直居中*/ .row_div{ width:200...
flex实现子块的完美居中 方案 父块使用display:flex属性,子块margin自适应即可实现 代码 index.html 块状元素垂直居中(已知高度) *{margin: 0;padding: 0;} .parent{ display: flex; height:500px; background: #03A1FA; } .child{ width: 100px; height: 100px; margin: auto; background: #BB3713; } /* 这个依赖于设置“margin”值为“auto”值，自动获取伸缩容器中剩余的空间。所以设置垂直方向margin值为“au...
昨天做移动项目是，遇到这样一个案例，如图，图片容器随着视口宽度进行自由拉伸扩张，图片不定宽高，垂直居中： 当时做这个布局的时候，我一直想到用display:table-cell通过vertical-align:middle，来实现居中，可以当我在同一个节点用position:absolute，会导致此居中问题失效。 最后想到的解决方案，案例如下，不定宽高垂直居中： p{margin:0;padding:0} .wrap,.wrap1{ ...
转自 利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码： html 123 Text here css ...
兼容各个浏览器的未知高度div垂直居中效果:让div垂直居中与它的父对象中，并不像是让div在父元素中水平居中那么简单，只要简单的为此元素设置margin:0px auto即可，虽然将一些属性配合使用也可以将div垂直居中与父元素中，但是在某些浏览器中并不兼容，下面就介绍一种兼容各大浏览器的方式。先看一段代码实例: 蚂蚁部落 .parent { width:200px; height:200px; background-color:green; display:table-cell; verti...
如何实现div水平垂直和居中效果: 有时候可能我们需要让一个div在它的父容器中居中显示。先看代码实例再进行分析。 代码实例: 蚂蚁部落.parent{ width:500px; height:500px; border:1px solid red; position:absolute;}.children{ width:200px; height:100px; background-color:green; position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px;} 上面代码中，使用了position属性实现对象的垂直...
为什么设置的vertical-align垂直居中不起作用: vertical-align属性可能使用并不是太频繁，但是有时候可能会使用vertical-align:middle设置对象内部的元素垂直居中对齐，但是有时候会发现此设置并非都会产生效果。代码实例如下: 蚂蚁部落td{ width:200px; height:200px; border:1px solid red; vertical-align:bottom;}div{ width:60px; height:60px; background-color:#690;} 从以上代码的表现可以看出...
CSS如何实现图片上下垂直居中: 在很多时候需要将图片上下垂直居中，不过没有一个直接了当的属性能够实现此功能。当然实现图片上下垂直居中的方法有多重，下面就简单介绍一下其中的两种。 方法一: 使用margin方式，使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。 代码实例如下: 蚂蚁部落div { height:400px; width:400px; border:1px solid red;}div img {margin-top:127px;} ...
对一个元素水平垂直居中，在我们的工作中是会经常遇到的，也是CSS布局中很重要的一部分，本文就来讲讲CSS水平垂直居中的一些方法。由于我们大搜车的日常工作中已经不再需要理会低版本IE，所以本文所贴出的方法，是没有去考虑IE的，如果有兼容需要，可以参见这篇文章： http://www.cnblogs.com/Dudy/p/4085292.html 先看一张图，这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的： 如图所示，CSS布局是可以分为几大块的...
这是我技术博客生涯的第一篇文章，想想还是有点小鸡冻。。。菜鸟的征程现在要开始了 学习css的时候经常被各种问题纠结到不要不要的，没办法，只能写写博客帮助整理一下自己的思绪和帮助一下和我遇到同样问题的小伙伴们 不知道各位学习css的小伙伴会不会被垂直居中的问题虐的好痛苦，反正我也被虐的挺惨 但是稍微整理一下，感觉好像垂直居中也就那么回事。 一，利用line-height line-height是一个设置行高的一...
声明：来自http://www.imooc.com/learn/9 学习 父元素高度确定的单行文本的竖直居中 是通过设置父元素的 height 和 line-height 高度一致来实现的。 .container{ height:100px; line-height:100px; background:#999;} 父元素高度确定的多行文本 使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 ...
如何让div水平垂直居中 @(css)[妙瞳] 引子 我们经常遇到需要把div中的内容进行水平和垂直居中。所以，这里介绍一种方法，可以使div水平居中和垂直居中。 代码： div水平垂直居中 *{ margin:0; padding:0; } div.box{ background-color:pink; border:2px solid #000; width:960px; height:500px; margin...
CSS实现元素垂直居中 对元素的垂直居中针对于单行元素和多行元素将分情况讨论。 一、父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。HTML结构： Hello World!!! CSS样式： .container{ height:100px; line-height:100px; background:#999; } 二、父元素高度不确定的多行文本 对于父元素高度不确定的文本、图片等的块级元素...