使用css實現元素水平垂直居中

在做彈窗元件時，需要實現元素水平垂直居中，總結記錄一下。（有借鑑）

<
!doctype html>
<
/title>
"utf-8"
>
"text/css"
>
*.box
.left
<
/style>
<
/head>
="box"
>
="left"
>qwe<
/div>
<
/div>
<
/body>
<
/html>

絕對定位到螢幕的一半，是相對於左上角的座標點，還需要設定上移height的50%，左移width的50%。父子關係的話，需要給父元素設定position: relative，子元素是相對于父元素絕對定位的。

.left

定位方法前提是寬度和高度已知，當兩者未知時，使用transform，但是，但是，這種方法可能會有文字模糊的問題，當畫素是非整數時。並且，在父元素使用transform，會限制positon:fixed，不能固定變成跟absolute一樣。

可以看下這篇文章，詳細介紹了transform的影響：css3 transform對普通元素的n多渲染影響

<
!doctype html>
<
/title>
"utf-8"
>
"text/css"
>
*.box
.left
<
/style>
<
/head>
="box"
>
="left"
>
123qwe<
/p>
<
/div>
<
/div>
<
/body>
<
/html>

是在父元素上進行設定的，對於文字居中也有效。

flex瀏覽器相容