CSS を使用して垂直方向の中央揃えを実現する 7 つの方法を共有します-CSSチュートリアル-php.cn

CSS を使用して垂直方向の中央揃えを実現する 7 つの方法を共有します

高洛峰

リリース： 2017-03-21 17:10:54

オリジナル

1552 人が閲覧しました

今日は、私のブログアプリケーションが承認されました。純粋な CSS を使用して垂直方向の中央揃えを実現するために私が見てきたさまざまな方法についてお話します。なぜこれを最初の記事にするのでしょうか？これは私が初めてフロントエンドに連絡し始めたときに学んだ最も役立つ知識なので、皆さんもこの知識から恩恵を受けられることを願っています。

CSS で水平方向のセンタリングを実装するのは非常に簡単です。インライン要素は親要素の text-align:center を設定し、ブロックレベルの要素はそれ自体に magrin:auto を適用します。ただし、垂直方向のセンタリングを実現するのは少し面倒です。まず、これは非常に一般的な要件ですが、実際には、特にデザインサイズが固定されていない場合、実現するのが困難です。私が見つけたメソッドをいくつか紹介します。

方法 1: 行の高さ

(1) 単一行のテキストを中央揃えにする

HTML コード

<p class="box1">
<p class="box2">垂直居中</p>
</p>

ログイン後にコピー

CSS コード

 .box1{
   height: 200px;
 }
 .box2{
  line-height: 200px;
 }

ログイン後にコピー

(2)

画像垂直中央揃え

HTMLコード

 <p class="box1">
   <img src="images/bg-sun.png" alt="">
 </p>

ログイン後にコピー

CSSコード

 .box1{
   line-height:200px;
 }
 .box1 img{
   vertical-align: middle;
 }

ログイン後にコピー

方法2:テーブルセル

CSSコード

 .box1{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }

ログイン後にコピー

方法3:display:flex

(1) CSSコード

 .box1{
   display: flex;
 }
 .box2{
   margin:auto;
 }

ログイン後にコピー

( 2) CSSコード

 .box1{
   display: flex;
   justify-content:center;
   align-items:center;
 }

ログイン後にコピー

方法 4: 絶対位置決めと負のマージン

(1) CSS コード

 .box1{ 
   position: relative; 
 } 
   .box2{ 
   position: absolute; 
   top: 50%; 
   left: 50%; 
   margin-top: -10px;/*减去子元素高度一半*/ 
   margin-left:-32px;/*减去子元素宽度一半*/
 }

ログイン後にコピー

(2) CSS コード

 .box2{
   position: absolute;
   top:calc(50% - 10px);/*减去子元素高度一半*/
   left:calc(50% - 32px);/*减去子元素宽度一半*/
 }

ログイン後にコピー

方法 5: 絶対位置決め と 0

CSSコード

 .box2{
   width: 50%;
   height: 50%;
   background: #555;
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
     }

ログイン後にコピー

方法6: translate

(1) CSSコード

 .box2{
   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
 }

ログイン後にコピー

(2) HTMLコード

 <body>
 <p class="box1">
 </p>
 </body>

ログイン後にコピー

CSSコード

 .box1{
   width: 200px;
   height: 200px;
   background: #666;
   margin: 50vh auto 0;
   transform: translateY(-50%);
 }

ログイン後にコピー

方法7 :display:-

CSSコード

 .box2{
   display: -webkit-box;
   -webkit-box-pack:center;
   -webkit-box-align:center;
   -webkit-box-orient: vertical;
   text-align: center7 }

ログイン後にコピー

以上がCSS を使用して垂直方向の中央揃えを実現する 7 つの方法を共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。