Heim >Web-Frontend >HTML-Tutorial >请问怎样让div居中？_html/css_WEB-ITnose
请问怎样让div居中？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:03:061143Durchsuche
如图，我想用css实现红色div对大div的横 纵向居中怎样实现？center只能实现横向居中，用css如何替代？。谢谢各位。
- 首页
- 新产品
- 服务指南
- 合作伙伴
- 联系我们
123
回复讨论(解决方案)
用margin:auto可以吗？
试一试这个
水平垂直居中，兼容ie6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">li {float:left;text-decoration:none;padding-left:20px;text-align:center;}.bigdiv {border:1px solid;text-align:center;height:100px;width:500px;display:table;_position:relative; text-align:center;}.bigdiv .pos{display:table-cell;vertical-align:middle;_position:absolute;_top:50%;_left:50%; }.bigdiv .pos span{_position:relative;_top:-50%;_left:-50%; display:block;border:1px solid red; height:50px; width:300px; text-align:center;line-height:50px; margin:0 auto;}</style></head><body><ul style="height:36px; list-style:none;"><li>首页</li><li>新产品</li><li>服务指南</li><li>合作伙伴</li><li>联系我们</li></ul><div class="bigdiv"><!--<center>--> <div class="pos"> <span>123</span> </div><!--</center>--></div></body></html> 用绝对布局 position:absolute;top:50%;left:50%;
指定宽度+margin:auto 就对父层居中
设置最外框的line-heigt值与其高度一致
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
Vorheriger Artikel：Blogger安装最新文章Nächster Artikel：15套精美的免费界面设计 PSD 素材【免费下载】_html/css_WEB-ITnose