screen_html/css_WEB-ITnose 上で DIV の水平方向と垂直方向の中央揃えを実現する css-htmlチュートリアル-php.cn

screen_html/css_WEB-ITnose 上で DIV の水平方向と垂直方向の中央揃えを実現する css

WBOY

リリース： 2016-06-24 11:26:06

オリジナル

1674 人が閲覧しました

CSS を使用して全画面で div を水平方向と垂直方向に中央揃えにする方法この章では、Web ページ全体で div 要素を水平方向と垂直方向に中央揃えにする方法を紹介します。。

コードは次のとおりです:

<!DOCTYPE html> <html> <head> <title>css 实现DIV水平垂直居中于屏幕</title><style type="text/css"> body{   margin:0px;   padding:0px; } #thediv{  width:100px;  height:100px;  background:green;  position:absolute;  left:50%;  top:50%;  margin-left:-50px;  margin-top:-50px;}</style> </head> <body> <div id="thediv"></div></body> </html>

ログイン後にコピー

オンラインで実行

上記のコードは、Web ページで div の全画面中央揃え効果を実現します。ここでは、その実装プロセスを簡単に紹介します。

実装原理:

div要素を絶対配置に設定し、その左右の属性値をそれぞれ50%に設定します。このとき、divは中央に配置されません。 div の値なので、さらにそれを上と左に一定の距離（それぞれ高さと幅の半分）だけ引き上げる必要があります。