居中百分比宽高的元素

如果知道该元素确切的宽高，居中它比较容易，可以参考此文，top 和 left 设成 50%，负 margin 分别设置该元素宽，高的一半。如果明确知道该元素的宽高，用此法居中很容易，如果它的宽高是百分比呢？

你可能认为负的百分比 margin 可以搞定，它适用于水平的 margin，但是 margin 基于宽度（垂直 margin 也是）（译者注：margin 是百分比的话，跟此元素的包含块的宽度有关，见规范），因此当你用负的 top margin 时，失败了。

有个小技巧，用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。可能你想居中一个模态窗口，受小屏幕 / 响应式设计所限，你很可能会把对话框设计成百分比宽度（或者其它未知情况，比如仅有 max-width 最大宽度。）

有一种方案！Mary Lou 在 Codrops 用到的，她的文章 / 示例：漂亮的模态窗口效果。

不能用负的 margin ，可以用负的 translate() 代替。


.center {position: absolute;left: 50%;top: 50%;/*不是 =(margin-left: -25%;margin-top: -25%;*//* 而是!*/transform: translate(-50%, -50%);/*甚至不要定义 比如：Height 可以缺省!*/width: 40%;height: 50%;
}

居中百分比宽高的元素相关推荐

CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
Html百分比设宽偏差大,absolute和relative元素设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
absolute和relative元素设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
jl1.如何设置元素的宽高包含元素的边框和内边距
jl1.如何设置元素的宽高包含元素的边框和内边距方法一: 文档地址:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizi ...
css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答
css实现元素垂直水平居中-包括未知宽高的元素这个一道很经典的面试题,做项目中也常会出现这样的需求. 现在我就用几种比较常用的方法.兼容性也列出来. 第一种已知宽高(定位加负边距解决)兼容到IE6 ...
使不知宽高的元素水平垂直居中的方法
本文主要介绍如何使元素居中显示的几种方法,当然方法有很多,现在记录的不过是笔者目前能够想到的几种:定位.table-cell.增加空span.弹性盒模型. html样式如下: <div clas ...
页面宽高，窗口宽高，元素宽高，元素位置，页面滚动距离
注:以下内容只适用于chrome 页面宽高: document.body.clientWidth/Height(不包括margin) document.body.offsetWidth/Height( ...
获取浏览器视口宽高以及元素宽高
适用所有浏览器 var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWid ...
设置不定宽高的元素垂直水平居中
1:思路:使用css3 flex布局优点:简单快捷缺点:兼容不好吧,详情见:http://caniuse.com/#search=flex 先看效果 html代码 <div class=' ...

居中百分比宽高的元素

居中百分比宽高的元素相关推荐

最新文章

热门文章