ホームページ > 記事 > ウェブフロントエンド > CSS で要素の水平方向および垂直方向の中央揃えを実現する 2 つの一般的な方法の詳細な例
この記事では、CSS で要素の水平方向と垂直方向の中央揃えを実現する 2 つの方法を主に紹介します。この記事では、学習や学習に役立つ完全なサンプル コードを紹介します。以下を見てください。
1. 親要素のフレックスレイアウトは、要素の水平方向と垂直方向のセンタリングを実現します
サンプルコードは次のとおりです:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent{ display:flex; display:-webkit-flex; justify-content: center; align-items: center; width:100%; height: 200px; background-color: #c43; } .child{ width:300px; height:100px; background-color: #c4235b; } </style> </head> <body> <p class="parent"> <p class="child"></p> </p> </body> </html>
効果の画像は次のとおりです:
2. 絶対配置と負のマージン値により、要素の水平方向と垂直方向のセンタリングが実現されます
注: 要素自体が幅と高さを決定する必要があります
サンプルコードは次のとおりです
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width:300px; height:100px; background-color: #873cac; position:absolute; top:50%; left:50%; margin-left: -150px; margin-top:-50px; } </style> </head> <body> <p></p> </body> </html>
レンダリングは次のとおりです:
以上がCSS で要素の水平方向および垂直方向の中央揃えを実現する 2 つの一般的な方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。