Heim  >  Artikel  >  Web-Frontend  >  css div垂直水平居中实现_html/css_WEB-ITnose

css div垂直水平居中实现_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:44:471200Durchsuche

比如设置html中下面的div为垂直水平居中,则

div <strong>id=</strong><strong>"box"</strong>><strong>div</strong>>


css样式

<strong>#box</strong>{    <strong>width</strong>: 300<strong>px</strong>;    <strong>height</strong>: 200<strong>px</strong>;    <strong>margin-left</strong>: -150<strong>px</strong>;//宽度的一半,很重要,不然不居中,会偏右    <strong>margin-top</strong>: -100<strong>px</strong>;//高度的一半    <strong>position</strong>: <strong>absolute</strong>;//绝对定位方式    <strong>top</strong>: 50%;    <strong>left</strong>: 50%;    <strong>background-color</strong>: <strong>aqua</strong>;//背景颜色,便于测试查看效果}

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn