一.水平居中

1.文字水平居中

<div class="one"> 測試居中 </div> <style> .one{ width: 200px; height: 100px; border:1px solid red; text-align: center; } </style>

2.盒子居中

<div class="one">是盒子居中</div> <style> .one{ width: 200px; height: 100px; border:1px solid red; margin: 0 auto; } </style> 3.多塊級元素水平居中 <div class="container"> <div class="child"> 簡單不先于復雜 </div> <div class="child"> 而是在復雜之后 </div> <div class="child"> 簡單不先于復雜，而是在復雜之后。 </div> <div class="child"> 簡單不先 </div> </div> <style> .container { height:100px; padding: 8px; text-align: center; border: 2px dashed #f69c55; } .child { padding: 8px; width: 4rem; margin: 0 8px; color: #fff; background: #000; display: inline-block; } </style> 4.彈性布局，多塊級水平居中 <div class="flex-center"> <div> 測試1 </div> <div> 測試2測試2測試2測試2測試2測試2測試2 </div> <div> 測試3測試3測試3測試3 </div> </div> <style> .flex-center { width: 800px; padding: 8px; display: flex; 　　justify-content: center; border: 2px dashed #f69c55; } .flex-center >div { padding: 8px; width: 100px; margin: 0 8px; color: #fff; background: #000; } </style> display: flex;兼容性不好可以這樣解決：最少支持ie10以上 .flex-center{ display: -webkit-flex; /* 新版本語法: Chrome 21+ */ 　　　　　　 display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */ 　　　　　　display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */ 　　　　　　display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */ 　　　　 } .flex-center>div?{ -webkit-flex: 1; /* Chrome */ 　　　　　　　　-ms-flex: 1 /* IE 10 */ 　　　　　　　　flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 　　　　　　　　 -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */ 　　　　　　　　-moz-box-flex: 1; /* OLD - Firefox 19- */ 　　　　　　　　}

5.垂直居中

1.元素是display:block和display:inline-block都可以使用height:100px ,line-height:100px;

2.利用display:table-cell

<div class="center-table"> <p class="v-cell">The more technology you learn</p> </div> <style> .center-table { width: 800px; display: table; height: 140px; border: 2px dashed #f69c55; } .v-cell { display: table-cell; 　　vertical-align: middle; } </style>

3.用flex布局

<div class="center-flex"> <p>Dance like nobody </p> </div> <style> .center-flex { width: 500px; height: 140px; display: flex; flex-direction: column; 　　justify-content: center; border: 2px dashed #f69c55; } </style>

4.塊級元素固定高度（這個應該是大家最熟悉的，例子就不放了）

.parent {position: relative;
}
.child {position: absolute; top: 50%; height: 100px; margin-top: -50px; }

?5.不知高度

<div class="parent"> <div class="child">世界上有 10 種人，懂二進制的和不懂二進制的。</div> </div> <style> .parent { height: 140px; position: relative; border: 2px dashed #f69c55; } .child { 　　position: absolute; 　　top: 50%; 　　transform: translateY(-50%); background: black; color: #fff; padding: 1rem; width: 12rem; } </style> transform的兼容性：

transform: translate(50px,100px);

-ms-transform:?translateY(-50%)		/* IE 9 */
-webkit-transform: ?translateY(-50%)	/* Safari and Chrome */
-o-transform:?translateY(-50%)/* Opera */
-moz-transform: ?translateY(-50%)；	/* Firefox */

三，水平居中，垂直居中

1.固定寬高的水平垂直居中（大家熟悉的）

parent {

    position: relative;
}
.child {width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }
2.不知寬高-水平垂直居中

.parent {position: relative;
}
.child {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

3.flex布局（上面水居中和垂直居中有例子就不寫了）

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

4.利用grid實現水平垂直居中，兼容性較差，不推薦。

.parent {height: 140px;display: grid; } .child { margin: auto; }
5.彈窗的水平居中（截圖不好放，就不放了，大家粘貼就可以運行）

<div class="element"> <div>水平垂直居中了，好開心哦</div> </div> <style> .element{ width: 300px; height: 300px; background-color: deeppink; position: absolute; 　　left: 0; 　　right: 0; 　　top: 0; 　　bottom: 0; 　　margin: auto; } </style>

大家有好的方法就留言哈

?

轉載于:https://www.cnblogs.com/qianduanting/p/8663663.html

總結

以上是生活随笔為你收集整理的水平，垂直居中的15种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。