ホームページ  >  記事  >  ウェブフロントエンド  >  CSS 記事の絶対配置要素のセンタリング手法

CSS 記事の絶対配置要素のセンタリング手法

高洛峰
高洛峰オリジナル
2017-02-13 14:27:051755ブラウズ

通常、要素を中央、左: 50%、上: 50% に配置し、負のマージンまたは変換を使用して効果を実現します。
今日は別のトリックを見つけました。top、left、right、bottom を使用して値を 0 に設定し、magin:auto を使用してセンタリングを実現します。
理由:

<div class=&#39;box>
    <div class=&#39;jz&#39;></div>
</div>
div.box{
   position: relative;
   height: 300px;
   background: #989eaa;
}
div.fz{
   width: 100px;
   height: 100px;
   background: #499682;
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
   margin:auto;
}

絶対配置要素のセンタリング手法に関するその他の CSS 記事については、PHP 中国語 Web サイトの関連記事に注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。