CSS_html/css_WEB-ITnose を使用して垂直方向と水平方向の中央揃えを実現する 6 つの方法

はプロジェクトでよく使われます。今日はそれをまとめました:

デモアドレス: http://codepen.io/anon/pen/xGdpOa

次の 2 つのクラスはパブリック クラスです。表示を良くするため、非コアコード

	.common{		width: 600px;height: 180px;		background-color:#56abe4;		color: #fff;		margin: 15px auto; 		border-radius: 3px;	   }	.con{		display: inline-block;		padding: 15px;		width: 160px;		height: 80px;		background-color: orange;	}

テキスト部分:

最初のメソッド:

/*position:Absolute ;top :0; 右: 0; : 0; 左: 0; マージン: 自動; パート:

2 番目のメソッド:

/*display: table-cell*/

HTML 構造:

リーリー

CSS 部分:

<div class="common block1">	<div class="inner1 con">		position: absolute;		top:0;right: 0;bottom: 0;left: 0;		margin: auto;	</div></div>

3 番目のメソッド:

/*display: flex;* /

HTML 構造:

rree

CSS 部分:

		.block1{		position: relative;	}	.inner1{		position: absolute;		top:0;right: 0;bottom: 0;left: 0;		margin: auto;	}

4 番目のメソッド:

/*ネガティブポジショニング*/

HTML 構造:

えー

CSS 部分:

<div class="common block2">   	<div class="con">		display: table-cell;		text-align: center;		vertical-align: middle;	</div></div>

5 番目のメソッド: +

/*Inline Block*/

HTML 構造:

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

CSS 部分:

rree

上記のソリューションには互換性の問題がありますので、使用する前にブラウザの互換性を確認してください: http://caniuse.com/

。

追加へようこそ~