ホームページ > 記事 > ウェブフロントエンド > CSSでdivを垂直方向に中央揃えにする方法

CSSでdivを垂直方向に中央揃えにする方法

php中世界最好的语言オリジナル: 2017-11-27 09:54:421624ブラウズ

高さと幅が固定されたdivをWebページの垂直方向に中央揃えにする場合は、誰でも簡単に作成できると思いますが、高さと幅が固定されたdivの場合、垂直方向に中央揃えにする方法は次のとおりです。 ?では、これらの div はどのようにして垂直方向の中央に配置されるのでしょうか?この記事では、

高さと幅を固定したdivの垂直方向のセンタリング

enter image description here

上の図にあるように、高さと幅を固定したものは次のように書くと非常に簡単です:

 position: absolute;
 left: 50%;
 top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

高さを固定していないものを垂直方向にセンタリングする方法方法 1:

「ゴースト」疑似要素 (目に見えない疑似要素) と inline-block /

vertical-align

を使用すると、センタリングを実現できます。これは非常に賢明です。ただし、この方法では中央に配置される要素がインラインブロックである必要があり、真に汎用的な解決策ではありません。 htmlは次のとおりです:

<div style="height: 300px;">
    <div>
        <h1>haorooms案例题目</h1>
        <p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
    </div>
</div>

cssは次のとおりです:

/* This parent can be any width and height */
.block {
  text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: &#39;&#39;;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

方法2:

テーブルレイアウト方法を使用できますが、この方法にも制限があります。

書き方は以下の通りです:

<table style="width: 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Unknown stuff to be centered.
     </td>
  </tr>
</table>

テーブルの書き方は手間がかかるので、テーブルの代わりにdivを使うこともできます。書き方は以下の通りです:

html:

<div>
   <div>
       Unknown stuff to be centered.
   </div>
</div>
css:
.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

方法3、究極の解決策。 :

上記の 2 つの方法には制限がある可能性があります。もちろん、私が紹介した 3 番目の方法は、固定された高さと幅の div ではなく、より成熟した垂直方向の中央揃え方法です。ただし、メソッドは CSS3 で書かれています。IE8 と互換性を持たせたいお子様には、上記のメソッドを使用することをお勧めします。

この方法は固定の高さと幅に似ていますが、マージンなしでtranslate()を使用します

デモは次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>haorooms不固定高度div写法</title>
    <style>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:50%;
  height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

上記の私のCSSはWebKitカーネルブラウザ専用であり、他のカーネルブラウザは次のように記述されます:

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

各ブラウザの書き方については、私の過去の記事をご覧ください: http://www.haorooms.com/post/css_common

一部のポップアップレイヤースタイルは、この方法を使用して中央に配置することもできます

position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

css3 可変幅かつ高レベルの垂直センタリング

わずか 3 文で可変幅かつ高レベルの垂直センタリングを実現できます。

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

上記の 3 つの文を親要素に追加して、子要素の水平方向と垂直方向の中央揃えを実現します。

垂直方向の中央揃えには margin:auto を使用します

マージンの値を auto に設定すると、残りのスペースを割り当てることができます。ブロックレベルの要素は margin:0 auto に設定されており、左、右、中央に表示できることがわかります。 margin:autoに設定した後、マージンを上下左右の中央に揃える方法はありますか？上下左右をセンタリングすることで、垂直方向のセンタリングを実現できます。

答えは「はい」です。上部と下部に十分なスペースがある限り、マージンによって上部と下部のスペースが自動的に割り当てられるようにすることができます。

位置決めを使用して、上下左右に十分な余白を与えることができます。次に、 margin:auto を使用して垂直方向のセンタリングを実現できます。

HTMLの実装は以下の通りです: (シンプルな縦型ポップアップボックスを作成します)

<div>
    <div></div>
</div>

CSSコードは以下の通りです非常にシンプルで互換性があり、IE8+をサポートしています

.father{position:fixed;width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
.son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}

この方法で実現できます。垂直方向のセンタリングは非常に簡単ではありませんか？さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注目ください。