Home > Article > Web Front-end > CSS solves unknown height vertical centering_CSS/HTML

CSS solves unknown height vertical centering_CSS/HTML

WBOYOriginal: 2016-05-16 12:12:031182browse

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>

Statement：

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

Previous article：Problems encountered with layout Very good insights_CSS/HTMLNext article：Problems encountered with layout Very good insights_CSS/HTML

See more

CSS solves unknown height vertical centering_CSS/HTML

Related articles