コンテンツをトリミングせずに DIV を垂直方向および水平方向の中央に配置するにはどうすればよいですか?

コンテンツのトリミングなしの垂直方向と水平方向の DIV のセンタリング

コンテンツを切り取らずに DIV を垂直方向と水平方向の両方でセンタリングすることに関する懸念事項は次のとおりです。一般的なものです。絶対位置と負のマージンを使用する従来のアプローチは機能する可能性がありますが、ウィンドウ サイズが DIV コンテンツより小さくなると、コンテンツが切り取られる可能性があります。

幸いなことに、最新のブラウザでは、もっと高度なものがありますオプション:

フレックスボックス

HTML:

</p>
<div>

CSS:

.content {<br> 位置: 絶対;<br> 左: 50%;<br> 上: 50%;<br> -webkit-transform: 変換(-50%, -50%);<br> 変換: 変換( -50%、 -50%);<br>}<br>

このソリューションは、transform プロパティを利用して DIV コンテンツを両方向に 50% 変換し、その中心が中心と揃うようにします。

注: フレックスボックスは古いブラウザでは広くサポートされていないため、このソリューションを実装する場合はブラウザの互換性を考慮することが重要です。

以上がコンテンツをトリミングせずに DIV を垂直方向および水平方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。