Home >Web Front-end >HTML Tutorial >How can I center the div? _html/css_WEB-ITnose
How can I center the div? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:03:061152browse
As shown in the picture, I want to use css to center the red div horizontally and vertically on the large div. How to achieve this? center can only achieve horizontal centering, how to replace it with css? . Thank you.
080b747a20f9163200dd0a7d304ba388
li {
float:left;
text-decoration:none;
padding-left:20px;
text-align:center;
}
.bigdiv {
border:1px solid;
text-align:center;
height:100px;
width:500px ;}
531ac245ce3e4fe3d50054a55f265927
36fc0da5a553527cb1d2a9551dbb853b
b2386ffb911b14667cb8f0f91ea547a7Untitled Document< ;/title>
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
91f50301206481a6d824557022bfcbef
e0797e7b80256aa46fad7a367c4a368b
25edfb22a4f469ecb59f1190150159c6New Productsbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6Service Guidebed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6Partnersbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6Contact usbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
7153a524c9cc0dce5e7f2cd49c115b5e
b51f221dc20d36219628227059209a3d-->
6be297f8f533907dd70c94f3d311cb09252073b45e92d9b3568cac6f6943620f12354bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
08c8b535194d2078eb0e240d90a895aa-->
16b28748ea4df4d9c2150843fecfba68
Reply to discussion (solution)
Is it possible to use margin:auto?
Try this
Horizontally and vertically centered, compatible with 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> Use absolute layout position:absolute;top:50 %;left:50%;
Specify the width margin:auto and center the parent layer
Set the line-heigt value of the outermost frame to be consistent with its height