#box{
position: absolute;
margin: auto;
top:0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 30%;
background-color: red;
text-align: center;
第一種的好處是不用知道垂直居中的元素的高寬，但是必須設定元素的寬高！然後通過margin：auto;來達到效果。
#box{
position: absolute;
top:50%;
left:50%;
transform:translate3d(-50%,50%,0);
background-color: red;
text-align: center;
這種的好處是寬高不用定義！
.box{
display: flex;
height: 400px;
align-items:center;
justify-content:center;
background: #0099cc
h1{display: flex;
align-items:center;
justify-content:center;
想要讓那個元素居中，就在其父元素加 display:flex;justify-content:center;align-items:center;
按照原理，往body裡設定這3個樣式，就能按body垂直居中，但是沒有，是因為body的預設高度為0px;在給個height:600px;就會有效果的！
#container{
position: absolute;
top:0px;
right: 0px;
bottom: 0px;
left: 0px;
display: flex;
justify-content:center;
align-items:center;
.box{
display: flex;
height: 400px;
align-items:center;
justify-content:center;
background: #0099cc
h1{display: flex;
align-items:center;
justify-content:center;
對於移動端，這是我常用的一種方法，這樣螢幕的寬高就都有了！
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
元素垂直居中方法
1 固定height的元素居中 1 使用絕對定位 相容所有瀏覽器，瀏覽器視窗縮小時，部分內容會消失 居中元素 content 2 在居中元素外插入乙個div 相容所有瀏覽器，瀏覽器視窗縮小時，內容不會消失 居中元素 main content 3 使用絕對定位，margin auto 相容所有瀏覽器，...
16種水平居中垂直居中方法
1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...