面試必備，工作一定會用到。emmm大家都懂的，話不多說，先直接貼一個總結和效果圖。
總結
要怎么實現上面這幅圖的效果呢，下面為大家總結了10中常用的方法。首先我先創建一個公共的模板樣式
<template> <div class="two"> <div class="parent"> <div class="child">123</div> </div> </div></template><style lang="less" scoped>.parent{ margin: 0 auto; width: 300px; height: 300px; border: 1px solid red; box-sizing: border-box; .child { height: 100px; width: 100px; background: #2f8df0; }}</style>然后具體用到的樣式單獨寫在方法里面，首先先介紹4個平時布局的技巧。
1.水平居中div里面的div，設置子元素的寬度。
.parent{ width:300px; margin:0 auto;}注意：如果子元素設置了display:table-cell，那么margin:0 auto;將會失效。
2.設置文字垂直居中，設置包含文字div的高。
.child{ text-align：center line-height:100px //知道子元素的高,設置和高一樣的高度}3.兩個或者多個塊級元素垂直居中對齊，父元素設置height和line-height相等。
.parent{ line-height: 300px; //知道父元素的高,設置和高一樣的高度 } .child1{ display: inline-block; vertical-align: middle; line-height: initial; //initial 關鍵字用于設置 CSS 屬性為它的默認值。 } .child2{ display: inline-block; vertical-align: middle; line-height: initial; //initial 關鍵字用于設置 CSS 屬性為它的默認值。 }4.讓一個元素充滿當前整個容器，設置absolute
.parent{position: absolute;top: 0;bottom: 0;left: 0;right: 0;}OK，介紹完畢，下面開始介紹CSS實現水平垂直居中的方式。
1.不需要設置子元素的寬高，需要設置父元素的高度。使用 absolute + transform （推薦）
.parent{ position: relative }.child{ position: absolute; top:50%; left:50%; transform:translate(-50%,-50%)}// 備注一下，如果只需要上下居中那就只要保留top,只要左右居中的話就保留left，translate設置 translateY(-50%)或者translateX(-50%)2.不需要設置子元素的寬高，不需要設置父元素的寬高。 使用flex布局（建議移動端直接使用flex
pc端看需要兼容的情況。）
.parent{ display:flex; align-items:center; justify-content:center;}.child{ }3.不需要設置子元素的寬高，需要設置父元素的高度。使用 lineheight。
注意：這種方法需要通過text-align在子元素中將文字顯示重置為想要的效果
.parent{ line-height: 300px; //設置和父元素的高度一樣 text-align: center;}.child{ display: inline-block; vertical-align: middle; line-height: initial; //initial 關鍵字用于設置 CSS 屬性為它的默認值。 text-align: left; //將文字顯示重置為想要的效果}4.不需要設置子元素的寬高，需要設置父元素的高度。使用css-table (使用之后此元素的margin:0 auto會失效)
.parent{ display: table-cell; vertical-align: middle; text-align: center;}.child{ display: inline-block;}5.設置子元素的寬高，設置父元素的高度。 使用absolute + 負margin
.parent{ position: relative }.child{ position: absolute; top: 50%; left: 50%; margin-left: -50px; //知道子元素的寬高 margin-top: -50px; //知道子元素的寬高}6.設置子元素的寬高，設置父元素的高度。使用 absolute + margin auto
.parent{ position: relative }.child{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}7.設置子元素的寬高，設置父元素的高度。 使用 absolute + calc(這種方法兼容性依賴calc的兼容性)
.parent{ position: relative }.child{ position: absolute; top: calc(50% - 50px); left: calc(50% - 50px);}8.使用writing-mode（使用起來比較復雜，不推薦）
//公共的樣式在最上面 <div class="parent"> <div class="box-child"> <div class="child">123</div> </div> </div>
.parent{ writing-mode: vertical-lr; //改變文字顯示的方向 text-align: center;}.box-child{ writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%;}.child{ text-align: left; //將文字顯示重置為想要的效果 margin: 0 auto;} 9.不需要設置子元素的寬高，不需要設置父元素的寬高。 使用grid布局（不建議使用，目前兼容性不是很好）
.parent{ display: grid;}.child{ align-self: center; justify-self: center;}10.使用table布局（純粹湊方法，這年頭，誰還用table布局呀，哈哈哈哈）
<table> <tbody> <tr> <td class="parent"> <div class="child">123</div> </td> </tr> </tbody></table>
.parent{ text-align: center;}.child{ display: inline-block;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
