整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS經典面試題-如何使用絕對定位來讓元素水平垂直居中

          對于使用CSS屬性使得元素水平垂直居中問題,基本是在前端面試問題中必問的一個問題。由于這個問題的回答要分好幾種情況,我也會寫幾篇文章分別講述。

          今天這篇文章我們首先看看,只有一個元素的時候采用絕對定位如何實現水平垂直居中的。

          我已經將代碼放到github上,感興趣的同學可以去看看。

          https://github.com/zhouxiongking/article-pages/blob/master/articles/position-center/position-absolute-center.html

          CSS

          場景

          我們假定頁面只有一個div元素,目的是通過CSS屬性控制該div元素的水平垂直居中。

          因為這篇文章講述的是絕對定位方法,因此要將div的position設置為absolute。為了讓div的水平垂直居中看起來更形象,我們添加border屬性。

          通用屬性

          接下來我們看看兩種實現方法吧。

          方法1

          在方法1中,我們首先需要使用margin: auto;在普通內容流中,margin: auto;相當于margin-top:0;margin-bottom:0。

          其次因為div已經被設置為absolute,脫離文檔流,因此可以方便設置left,top,right,bottom四個值。

          將left,top,right,bottom四個之都設置為0,瀏覽器會重新分配一個邊界框,這樣整個元素就會填充body所有可用空間。

          為了讓元素能呈現水平垂直居中的狀態,必須給div元素設置高度和寬度,添加height和width屬性。

          通過以上描述,我們可以得到以下的CSS屬性。

          css屬性

          通過在頁面上測試,我們可以得到以下的效果。而且不管瀏覽器窗口大小怎么變化,這個div元素始終是水平垂直居中的狀態。

          方法1效果圖

          方法2

          方法2更好理解一些,首先給div設定高度和寬度。

          由于position設置為absolute;給div設定left和top屬性都為50%

          最后將div的margin-left和margin-top設置為寬度和高度的一半。

          通過以上描述,得到以下的CSS代碼。

          CSS代碼

          通過在頁面上測試,我們可以得到以下效果圖。而且不管瀏覽器窗口大小怎么變化,這個div元素始終是水平垂直居中的狀態。

          方法2效果圖

          方法優點

          1. 上述兩種方法的CSS屬性都未曾使用CSS3特性,因此不用擔心兼容性問題。

          2. 兩種方法均只需要這一個類,就可實現在任何內容塊的水平垂直居中。

          3. 是否設置padding值對居中效果沒有影響

          方法缺點

          1. 元素必須設置高度和寬度,不設置的話將不會有任何效果。

          2. 由于必須設置高度,相當于定高,因此為了防止內容邊界溢出,一般需要設置overflow屬性。

          方法的優點很明顯,效果也很容易達到;但是方法缺點也是很明顯的,因為有很多元素都未必是定高和定寬的。總的來說還是應該看看實際應用場景。

          結束語

          今天這篇文章只是講解了,使用絕對定位讓元素水平垂直居中。后面會繼續講解其他元素水平垂直居中的情況,敬請期待吧。


          、CSS 垂直居中

          1、父元素display:table-cell;vertical-align:center,里面的子元素就會實現垂直居中,不需要知道子元素的寬高

          /* HTML */
          <div class='father'>
            <div class='son'></div>
          </div>
          <style>
            .father {
          	display: table-cell;
          	vertical-align: middle;
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
            }
            .son {
          	width: 50px;
          	height: 50px;
          	background-color: aqua;
            }
          </style>
          復制代碼
          • 效果展示


          2、absolute+margin:auto,定位為 absolute 的元素垂直居中,不需要知道該元素的寬高

          <!-- HTMl -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	position: relative;
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
            }
            .son {
          	position: absolute;
          	background-color: aqua;
          	width: 50px;
          	height: 50px;
          	top: 0;
          	bottom: 0;
          	margin: auto;
            }
          </style>
          復制代碼
          • 效果展示


          3、absolute+負margin,定位為 absolute 的元素垂直居中,需要知道該元素的寬高

          <!-- HTMl -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	position: relative;
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
            }
            .son {
          	position: absolute;
          	width: 100px;
          	height: 100px;
          	background-color: aqua;
          	top: 50%;
          	/* 負margin須是高度的一半 */
          	margin-top: -50px;
            }
          </style>
          復制代碼
          • 效果展示


          4、absolute+calc(css3計算屬性),定位為 absolute 的元素垂直居中,需要知道該元素的寬高

          <!-- HTMl -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	position: relative;
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
            }
            .son {
          	position: absolute;
          	width: 100px;
          	height: 100px;
          	background-color: aqua;
          	/* 注意"-"兩邊要隔開 減去的須是高度的一半*/
          	top: calc(50% - 50px);
            }
          </style>
          復制代碼
          • 效果展示


          5、absolute+transform,定位為 absolute 的元素垂直居中,不需要知道元素的寬高

          <!-- HTMl -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	position: relative;
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
            }
            .son {
          	position: absolute;
          	width: 100px;
          	height: 100px;
          	background-color: aqua;
          	top: 50%;
          	transform: translateY(-50%);
            }
          </style>
          復制代碼
          • 效果展示


          6、line-height,父元素:line-height=height。子元素:display:inline-block。子元素垂直居中,不需要知道子元素的寬高

          <!-- HTMl -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
          	line-height: 300px;
            }
            .son {
          	background-color: aqua;
          	width: 100px;
          	height: 100px;
          	display: inline-block;
          	vertical-align: middle;
            }
          </style>
          復制代碼
          • 效果展示


          7、flex,目前主流的布局方案,父元素為 flex 容器且添加 align-items: center,控制子元素的布局。不需要知道子元素的寬高

          <!-- HTMl -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
          	display: flex;
          	align-items: center;
            }
            .son {
          	background-color: aqua;
          	width: 100px;
          	height: 100px;
            }
          </style>
          復制代碼
          • 效果展示

          8、grid ,目前最強大的布局方案,使用還尚未流行。父元素為 grid,子元素添加 align-self: center。不需要知道子元素的寬高

          <!-- HTMl -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
          	display: grid;
            }
            .son {
          	background-color: aqua;
          	width: 100px;
          	height: 100px;
          	align-self: center;
            }
          </style>
          復制代碼
          • 效果展示


          9、偽元素after或before,這是我搜出來整理的。CSS 真的太神(s)奇(d)了,毫無道理。子元素垂直居中不需要知道寬高

          <!-- HTMl -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
          	display: block;
            }
            .father::after {
          	content: "";
          	display: inline-block;
          	vertical-align: middle;
          	height: 100%;
            }
            .son {
          	background-color: aqua;
          	width: 50px;
          	height: 50px;
          	display: inline-block;
          	vertical-align: middle;
            }
          </style>
          復制代碼
          • 效果展示


          10、隱藏節點(盒子)實現 該原理就是使用盒子占位置,但不顯示出該盒子。另外的盒子垂直居中,子盒子的寬高需由實際計算時確定

          <!-- HTML -->
          <div class="father">
          	<div class="hide"></div>
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
            }
            .son {
          	background-color: aqua;
          	width: 50%;
          	height: 50%;
            }
            .hide {
          	width: 50px;
          	height: 25%;
           }
          </style>
          復制代碼
          • 效果展示


          11、writing-mode,這是搜索整理而來,參考資料見最后。子元素盒子 display: inline-block。子元素垂直居中,不需要知道該盒子的寬高

          <!-- HTML -->
          <div class="father">
          	<div class="son"></div>
          </div>
          <style>
            .father {
          	width: 300px;
          	height: 300px;
          	border: 3px solid red;
          	writing-mode: vertical-lr;
          	text-align: center;
            }
            .son {
          	background-color: aqua;
          	width: 100px;
          	height: 100px;
          	writing-mode: horizontal-tb;
          	display: inline-block;
            }
          </style>
          復制代碼
          • 效果展示


          三、參考資料


          作者:soloplayer
          鏈接:https://juejin.cn/post/6904138129612439560
          來源:掘金


          主站蜘蛛池模板: 国产亚洲一区二区三区在线观看| 韩国一区二区三区视频| 99久久精品日本一区二区免费| 亚洲国产一区在线观看| 日本高清一区二区三区| 色一情一乱一伦一区二区三区| 国产丝袜一区二区三区在线观看| 亚洲A∨精品一区二区三区| 久久国产一区二区| 亚洲av综合av一区二区三区| 日本一区午夜爱爱| 一区二区三区四区免费视频| 精品一区二区ww| 久久久人妻精品无码一区| 日产亚洲一区二区三区| 波多野结衣一区二区三区高清av| 另类一区二区三区| 欧洲亚洲综合一区二区三区| 中文字幕在线无码一区| 无码精品一区二区三区| 中文字幕一区二区人妻| 无码人妻一区二区三区av| 精品乱人伦一区二区三区| 国产成人AV区一区二区三| 亚洲V无码一区二区三区四区观看| 国产福利日本一区二区三区| 真实国产乱子伦精品一区二区三区 | 日本福利一区二区| 国产激情视频一区二区三区| 精品久久久久久中文字幕一区| 久久国产一区二区| 国产成人精品久久一区二区三区av| AV鲁丝一区鲁丝二区鲁丝三区 | 亚洲制服中文字幕第一区| 视频一区视频二区日韩专区| 亚洲AV无码一区二区三区牛牛| 激情内射日本一区二区三区| 日韩成人一区ftp在线播放| 91亚洲一区二区在线观看不卡| AV无码精品一区二区三区宅噜噜| 国产精品久久久久久一区二区三区|