Skip to content

Instantly share code, notes, and snippets.

@naturallucky

naturallucky/css 中央揃え

Last active May 12, 2019 03:42
Show Gist options
  • Save naturallucky/5c499ec29a74fc28f444acdb235773aa to your computer and use it in GitHub Desktop.
Save naturallucky/5c499ec29a74fc28f444acdb235773aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css 中央揃え
https://qiita.com/Shinji-m/items/69a392685699f3ba95fb
/* A pattern */
display: table-cell;
vertical-align: middle;
/* B pattern */
display: flex;
align-items: center; /* 縦方向中央揃え */
justify-content: center; /* 横方向中央揃え */
/* C pattern */
margin: 0 auto;
/* sample */
<body style="">
<style type="text/css">
div{
min-width:100pt;
min-height:100pt;
border:2pt solid gray;
margin:5pt;
padding:10pt;
}
.A{
}
.aa{
/* A pattern */
display: table-cell;
vertical-align: middle;
}
.B{
/* B pattern */
display: flex;
align-items: center; /* 縦方向中央揃え */
justify-content: center; /* 横方向中央揃え */
}
.C{
}
.cc{
/* C pattern */
margin: 0 auto;
}
.D{
}
.dd{
/* D pattern */
text-align:center;
}
</style>
<body>
type A
<div style="border:2pt solid red; height:200pt;display:table;">
<div class="aa">aaa1</div>
<div class="aa">aaa2</div>
<div class="aa">aaa3</div>
</div>
type B
<div class="B" style="border:2pt solid green; height:200pt;">
<div>bbb1</div>
<div>bbb2</div>
<div>bbb3</div>
</div>
type C
<div style="border:2pt solid blue; height:200pt;">
<div class="cc" style="width:200pt;">ccc</div>
</div>
type D
<div style="border:2pt solid pink; height:200pt;">
<div class="dd" style="width:200pt;">ddd</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment