よく使用される CSS centering_html/css_WEB-ITnose

1.flexメソッド:

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

具体的なflexメソッドのチュートリアル: Sou氏の「Flex Layoutチュートリアル: 例」を参照してください

2.position:absolute

.center{position: absolute;top:50%; left:50%;width: 100px;height:100px;margin-top: -50px;margin-left:-50px;background: teal;}

3.position:fixed ;前の絶対メソッドと同様です

.center{position: absolute;top:50%;left:50%;width: 100px;height:100px;margin-top: -50px;margin-left:-50px;background: teal;} 

4.

.center{position: fixed;width: 100px;height: 100px;top: 0;right: 0;left: 0;bottom: 0;margin: auto;background: teal; }

5.

.center{position: absolute;width: 100px;height: 100px;top: 0;bottom: 0;left: 0;right: 0;margin: auto;background: teal;} 　

6.CSS3 ボックスモデル表示:-webkit-box

rrリー