ホームページ > 記事 > ウェブフロントエンド > divを中央に配置するにはどうすればよいですか? _html/css_WEB-ITnose
divを中央に配置するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:03:061068ブラウズ
写真に示すように、CSSを使用して赤いdivを大きなdivの水平方向と垂直方向の中央に配置したいのですが、これを実現するにはどうすればよいですか? center は水平方向のセンタリングのみを実現できます。CSS で置き換えるにはどうすればよいですか? 。ありがとう。
080b747a20f9163200dd0a7d304ba388
float:left;
text-align:center;
ボーダー:1px ソリッド;
高さ:100px;
531ac245ce3e4fe3d50054a55f265927
36fc0da5a553527cb1d2a9551dbb853b
b2386ffb911b14667cb8f0f91ea547a7無題ドキュメント6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
955ee0200c60308fee542e573ef3435e
25edfb22a4f469ecb59f1190150159c6ホームページbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6新製品bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6パートナーbed06894275b65c1ab86501b08a632eb /li>
929d1f5ca49e04fdcb27f9465b944689
b51f221dc20d36219628227059209a3d-> 8799d7222f84a3b0be5a73b1323c7ffeb4b207910faf5fc5716b3f20a63947b812354bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68 !--adca8a5fa06ffeafb062c2e3f274b930-->
16b28748ea4df4d9c2150843fecfba68
ディスカッションへの返信 (解決策)
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>
絶対レイアウト位置:absolute;top:50%;left:50% を使用します
width + margin:auto を指定して親レイヤーを中央に配置します