未知宽高元素窗口水平垂直居中 - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor
JavaScript
Embed code :
<textarea class="embedCode" data-view="embedded" data-pattern-value=''>
No autoresizing to fit the code
Render blocking of the parent page
Diff between the saved and locally drafted fiddle:
Auto-close HTML tags
Show line numbers
Enable line wrapping
Indent with tabs
Indent size:
Sublime Text
External Resources
AJAX Requests
/echo simulates AJAX calls:
JSON: /echo/json/
JSONP: //jsfiddle.net/echo/jsonp/
HTML: /echo/html/
XML: /echo/xml/
for more info.
Legal, Credits and Links
Created and maintained by
All code belongs to the poster and no license is enforced.
JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.
Like JSFiddle?
Keep us running by whitelisting JSFiddle in your ad blocker.
We're serving quality, tech-related ads only.
Thank you!
&div class=&mask&&
&div class=&dialog&&
&div class=&content&&
&textarea name=&textarea& class=&title-font& placeholder=&未知宽高元素窗口水平垂直居中(拖动右下角改变宽高)&&&/textarea&
margin: 0;
padding: 0;
body { font: 12px/1.5 tahoma, sans- }
ul { list-style:
a{ color:#333; text-decoration:}
a:hover{ text-decoration: color:#F63;}
.title-font { font-family: &helvetica neue&, stheiti, &microsoft yahei&, \5FAE\8F6F\96C5\9ED1, tahoma, sans- }
height: 100%;
height: 100
width: 100%;
width: 100
text-align:
background-color: rgba(200, 200, 200, .2);
.mask:after{
content: & &;
display: inline-
vertical-align:
text-align:
height: 100%;
display: inline-
vertical-align:
color: #666;
border-radius: 3
.content textarea{
vertical-align:
border-radius: 2
font-size: 14
padding:10
min-height: 100
min-width: 300
XHTML 1.0 Strict
XHTML 1.0 Transitional
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
JavaScript
CoffeeScript
JavaScript 1.7
Babel + JSX
TypeScript
Frameworks & Extensions
AngularJS 2.0.0-alpha.47
AngularJS 1.4.8
AngularJS 1.2.1
AngularJS 1.1.1
Bonsai 0.4.1
Brick edge
Dojo (nightly)
Dojo 1.12.2
Dojo 1.11.4
Dojo 1.10.8
Dojo 1.9.11
Dojo 1.8.14
Dojo 1.7.12
Dojo 1.6.5
Dojo 1.5.6
Dojo 1.4.8
Ember (latest)
Enyo (nightly)
Enyo 2.7.0
Enyo 2.5.1
Enyo 2.4.0
Enyo 2.2.0
Enyo 2.0.1
ExtJS 6.2.0
ExtJS 5.1.0
ExtJS 5.0.0
ExtJS 4.2.0
ExtJS 4.1.1
ExtJS 4.1.0
ExtJS 3.4.0
ExtJS 3.1.0
FabricJS 1.7.15
FabricJS 1.7.7
FabricJS 1.5.0
Inferno 1.0.0-beta9
jQuery (edge)
jQuery 3.2.1
jQuery 3.1.1
jQuery 2.2.4
jQuery 2.1.3
jQuery 1.9.1
jQuery Slim 3.1.1 Slim
jQuery Slim 3.1.0 Slim
jQuery Slim 3.0.0 Slim
JSBlocks (edge)
jTypes 2.1.0
KineticJS 4.3.1
KineticJS 4.0.5
Knockout.js 3.4.0
Knockout.js 3.0.0
Knockout.js 2.3.0
Knockout.js 2.2.1
Knockout.js 2.1.0
Knockout.js 2.0.0
Lo-Dash 2.2.1
Minified 1.0 beta1
MithrilJS 0.2.0
Mootools (nightly)
Mootools 1.6.0 (compat)
Mootools 1.6.0
Mootools 1.5.2 (compat)
Mootools 1.5.2
Mootools 1.5.1
Mootools 1.5.0
Mootools 1.4.5 (compat)
Mootools 1.4.5
Mootools 1.3.2 (compat)
Mootools 1.3.2
No-Library (pure JS)
OpenUI5 (latest, mobile)
Paper.js 0.22
Pixi 4.0.0
Pixi 3.0.11
Processing.js 1.4.7
Processing.js 1.4.1
Processing.js 1.3.6
Processing.js 1.2.3
Prototype 1.7.3
Prototype 1.6.1.0
qooxdoo 2.1
qooxdoo 2.0.3
RactiveJS 0.7.3
Raphael 2.1.0
Raphael 1.5.2 (min)
Raphael 1.4
React 0.14.3
React 0.9.0
React 0.8.0
React 0.4.0
React 0.3.2
RightJS 2.3.1
RightJS 2.1.1
Shipyard (nightly)
Shipyard 0.2
svg.js 2.5.0
svg.js 2.4.0
svg.js 2.3.7
svg.js 2.2.5
svg.js 2.1.1
svg.js 2.0.5
The X Toolkit edge
Thorax 2.0.0rc6
Thorax 2.0.0rc3
Three.js r54
Underscore 1.8.3
Underscore 1.4.4
Underscore 1.4.3
Underscore 1.3.3
Vue (edge)
Vue 1.0.12
WebApp Install 0.1
YUI 3.17.2
YUI 3.16.0
YUI 3.14.0
YUI 3.10.1
YUI 2.8.0r4
Zepto 1.0rc1
Mootools More 1.4.0.1
PowerTools 1.2.0
onDomready
No wrap - in &head&
No wrap - in &body&
Framework &script> attribute
Normalized CSSToggle Dropdown
前端最新编程技术和体验，请立刻访问极客标签编程学习平台，真正的帮助你学习编程，现在就加入我们成为“GEEK”吧！！
GB课程库用户界面使用向导已播放完毕
已成功发布提问，是否转向发布的提问地址？
使用类似的transform属性来定义，即可实现，如下：.item{
left: 50%;
transform: translate(-50%, -50%);}
&水平垂直居中：未知高度和宽度元素解决方案
官方支持浏览器&!DOCTYPE html&
&meta charset="utf-8"/&
&title&Demo&/title&
&style type="text/css"&
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
margin: 50px auto;
border:1px solid #CCC;
display:table;
text-align:center;
#position:relative;
display:table-cell;
vertical-align:middle;
#position:absolute;
#left:50%;
#position:relative;
#top:-50%;
#left:-50%;
&div id="outer"&
&div id="middle"&
&img id="inner" src="/images/logo_small.gif"/&
　　方案二:
&!DOCTYPE html&
&meta charset="utf-8"/&
&title&Demo&/title&
&style type="text/css"&
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
margin: 50px auto;
border:1px solid #CCC;
position:relative;
position:relative;
margin-left:-71px;
margin-top:-27px;
&div id="outer"&
&img id="inner" src="/images/logo_small.gif"/&
　　方案一主要原理是标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，但IE67不支持table布局，所以用了用了css hake，就是带#开头的属性。
　　方案二用负margin实现，但缺点是要知道居中内容的宽度和高度。
阅读(...) 评论()&!DOCTYPE html&
&meta charset="utf-8" /&
&title&css&/title&
&style type="text/css"&
* { margin:0; padding:0; list-style:none;
#vertical_box {
width:<span style="background-color: #f5f5f5; color: #%;
display:table;
border:1px red solid;
height:<span style="background-color: #f5f5f5; color: #px;
*position:relative; /*针对IE的hack*/
#vertical_box_sub {
display: table-cell;
vertical-align: middle;
*position:absolute; /*针对IE的hack*/
#vertical_box_container {
font-family:"宋体";
border:1px green solid;
*position:relative; /*针对IE的hack*/
*top:-50%;
margin:0 auto;
width:<span style="background-color: #f5f5f5; color: #px;
&div id="vertical_box"&
&div id="vertical_box_sub"&
&div id="vertical_box_container"&
&p&我是居中的文字&/p&
&p&我居中&/p&
&p&你也居中&/p&
&img src="" border=0 alt="\" title=""&
阅读(...) 评论()