CSS solves unknown height vertical centering

Although there is CSS vertical-align feature, it cannot effectively solve the vertical centering problem of unknown height (when there is text or image of unknown height in a DIV tag).

For standard browsers such as Mozilla, Opera, Safari, etc., you can set the display mode of the parent element to TABLE (display: table;) and the internal child elements to table-cell (display: table-cell ), using the vertical-align feature to vertically center it, but non-standard browsers do not support it.

Non-standard browsers can only set the child element to be 50% from the top, and then add an element inside to offset it by -50% from the top.

Copy code The code is as follows:

body {padding: 0; margin: 0;} 
body,html{height: 100%;} 
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;} 
#outer[id] { display: table; position: static;} 
#middle {position: absolute; top: 50%;} /* for explorer only*/ 
#middle[id] {display: table-cell; vertical-align : middle; position: static;} 
#inner {position: relative; top: -50%;width: 400px; margin: 0 auto;} /* for explorer only */ 
div.greenBorder {border: 1px solid green; background-color: ivory;}

xhtml

Copy code The code is as follows:

CSS2 selector #value[id] not supported by IE.

CSS2 selector #value[id] is equivalent to selector #value, but Internet Explorer does not support this type of selector. Likewise, .value[class] is equivalent to .value, which can only be read by standard browsers.

Test: Firefox1.5, Opera9.0, IE6.0, IE5.0 passed.

Vertical centering in valid CSS

<br><input onclick="runEx('runcode63300')" type="button" value="运行代码"> <input onclick="doCopy('runcode63300')" type="button" value="复制代码"> <input onclick="doSave(runcode63300)" type="button" value="保存代码">[Ctrl+A to select all Note: <a href="/article/23421.htm" title="查看具体详情" target="_blank">If you need to introduce external Js, you need to refresh to execute </a>]</address>
</div>
<br>
</div>
</div>

Related labels：

CSS解决未知高度垂直居中

source：php.cn

Previous article：Problems encountered with layout Very good insights_CSS/HTML Next article：The most basic CSS text filter effects_CSS/HTML

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS solves unknown height vertical centering_CSS/HTML