css3 居中問題（含水平居中與垂直居中）

水平居中：

1. 使用margin

<div style="margin: 10px auto;">

</div>

2. 內容居中,使用flex

<div style="display:flex;flex-directin:column;align-items:center">

    <div>內部</div>

</div>

 

垂直居中

 

1. 使用絕對定位

.modal-card{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

2. 使用flex

<div style="display:flex;flex-directin:row;align-items:center">

    <div>內部</div>

</div>

 

水平與垂直居中

 

1. 絕對定位

.modal-card{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

2.flex

<div style="display:flex;justify-content:center;align-items:center">

    <div>內部</div>

</div>