html 縦位置 要素を水平方向と垂直方向に中央揃えする方法




上下 中央 css ie (11)

私はタブのコンテンツを垂直方向にセンタリングしようとしていますが、CSSスタイルのdisplay:inline-flexを追加すると、 display:inline-flex 、水平方向のテキストアラインメントが消えます。

どのようにして各タブのテキストの位置合わせをxとyの両方にすることができますか?

* { box-sizing:border-box; }
#leftFrame {
  background-color:green;
  position:absolute;
  left:0;
  right:60%;
  top:0;
  bottom:0;
}
#leftFrame #tabs {
  background-color:red;
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:25%;
}
#leftFrame #tabs div {
  border:2px solid black;
  position:static;
  float:left;
  width:50%;
  height:100%;
  text-align:center;
  display: inline-flex;
  align-items: center;
}
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>        
  </div>
</div>


  • アプローチ6

/*Change units to "%", "px" or whatever*/

#wrapper{
  width: 50%;
  height: 70vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#left{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
}
#right{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: green;
}
.txt{
  text-align: center;
  line-height: 50vh;
}
<div id="wrapper">
   <div id="left" class="txt">Left</div>
   <div id="right" class="txt">Right</div>
</div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

上、下、左と右を0にするだけです。

<html>
<head>
<style>
<div> 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

<div> I am in the middle</div>

</body>
</html>

以下は、望ましい結果を得るためのFlex-Boxのアプローチです

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex-box approach</title>
<style>
  .tabs{
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 250px;
    background-color: grey;
    margin: 0 auto;
    
  }
  .f{
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: inline; /*for vertically aligning */
    top: 9%;         /*for vertically aligning */
    position: relative; /*for vertically aligning */
  }
</style>
</head>
<body>

    <div class="tabs">
        <div class="f">first</div>
        <div class="f">second</div>        
    </div>

</body>
</html>


Divのページを中心にするには、フィドルリンクをチェックしてください

#vh {
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 200px;
    height: 200px;
    background: white;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
<div id="vh">Div to be aligned vertically</div>

アップデートもう一つのオプションはフレックスボックスを使ってフィドルリンクをチェックすることです

.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>


私のための最も簡単でクリーンなソリューションは、CSS3のプロパティ "transform"を使用しています:

.container {
  position: relative;
}

.container a {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}
<div class="container">
  <a href="#">Hello world!</a>
</div>


ボックスを垂直方向と水平方向の両方にセンタリングする最も良い方法は、2つのコンテナを使用することです。

外装容器:

  • display: table;必要がありdisplay: table;

内側のコンテナ:

  • display: table-cell;必要がありdisplay: table-cell;
  • vertical-align: middle;なければなりませんvertical-align: middle;
  • text-align: center;が必要text-align: center;

コンテンツボックス:

  • display: inline-block;必要display: inline-block;
  • テキストを中央に揃えたい場合を除いて、水平方向のテキスト配置を調整する必要があります

デモ :

body {
    margin : 0;
}

.outer-container {
    display: table;
    width: 80%;
    height: 120px;
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

このフィドルも見てください!

ページの中央にセンタリング:

コンテンツをページの中央に配置するには、次のものをコンテナに追加します。

  • position : absolute;
  • width: 100%;
  • height: 100%;

そのデモがあります:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

このフィドルも見てください!


要素を垂直方向および水平方向に中心に置くために、以下に述べるプロパティを使用することもできます。

このCSSプロパティは、アイテムを垂直方向に整列させ 、次の値を受け入れます。

flex-start :アイテムはコンテナの上部に揃えられます。

フレックスエンド :アイテムはコンテナの下部に揃えられます。

center :アイテムはコンテナの垂直中央に整列します。

ベースライン :アイテムはコンテナのベースラインに表示されます。

ストレッチ :アイテムはコンテナにフィットするように引き伸ばされます。

このCSSプロパティのjustify-contentは 、アイテムを水平方向に整列させ、次の値を受け入れます。

flex-start :アイテムはコンテナの左側に整列します。

flex-end :アイテムはコンテナの右側に整列します。

center :アイテムはコンテナの中央に配置されます。

space-between :アイテム間に等間隔のアイテムが表示されます。

space-around :項目の周囲に等間隔で表示されます。


このコードスニペットを実行し、垂直方向と水平方向に整列したdivを確認します。

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}
<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>


CSS3がオプションの場合(またはフォールバックがある場合)、transformを使うことができます:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

上記の最初のアプローチとは異なり、IE9 +にはオーバーフローのバグがあるため、左に50%を使用する必要はありません。 正の正しい値を使用すると、水平スクロールバーが表示されません。


グリッドCSSのアプローチ

#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.main {
    background-color: #444;
}
<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box main"></div>
</div>


別のアプローチは、テーブルを使用することです:

<div style="border:2px solid #8AC007; height:200px; width:200px;">
  <table style="width:100%; height:100%">
    <tr style="height:100%">
      <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
    </tr>
  </table>
</div>







css3