摘要:方法一和元素寬高未知的情況寬高未知方法二絕對定位和自身寬度一半,自身高度的一半已知寬高寬高已知方法三布局方法四被居中的元素是或者元素和元素方法五絕對定位和定高方法六父級高度和
方法一、 CSS3 transform和position(元素寬高未知的情況)
方法二、 絕對定位和margin-left:-自身寬度一半,margin-top: -自身高度的一半 (已知寬高)寬高未知.box { width: 400px; height: 400px; background: #ccc; position:relative; } .box span { background: red; position: absolute; left: 50%; top: 50%; color: #fff; transform: translate(-50%, -50%); }
方法三、 css3 flex布局寬高已知.box { width: 400px; height: 400px; background: #ccc; position: relative; } .box span { display: inline-block; width: 100px; height: 100px; background: red; text-align: center; line-height: 100px; position: absolute; left: 50%; top: 50%; color: #fff; margin-left: -50px; margin-top: -50px; }
方法四、 被居中的元素是inline或者inline-block元素.box { width: 400px; height: 400px; background: #ccc; display:flex; justify-content:center; align-items: center; } .box .child { display: inline-block; width: 100px; height: 100px; background: red; }
方法五、絕對定位和margin:autoinline和inline-block元素.box { width: 400px; height: 400px; background: #ccc; display: table-cell; text-align: center; vertical-align: middle; } .box .child { display: inline-block; width: 100px; height: 100px; background: red; }
方法六、line-height: 父級高度和text-align: center.box { width: 400px; height: 400px; background: #ccc; position: relative; } .box .child { width: 100px; height: 100px; background: red; text-align: center; color: #fff; line-height: 100px; position: absolute; top:0; right:0; bottom:0; left:0; margin: auto; }定高
line-height.box { width: 400px; height: 400px; background: #ccc; line-height: 400px; text-align: center; font-size: 0; } .box .child { background: red; font-size: 14px; color: #fff; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52993.html
摘要:方法一和元素寬高未知的情況寬高未知方法二絕對定位和自身寬度一半,自身高度的一半已知寬高寬高已知方法三布局方法四被居中的元素是或者元素和元素方法五絕對定位和定高方法六父級高度和 方法一、 CSS3 transform和position(元素寬高未知的情況) 寬高未知 .box { width: 400px; height: 400px; backgr...
摘要:先說下我面試情況,我一共面試了家公司。篇在我面試的眾多公司里,只有同城的面問到相關問題,其他公司壓根沒問。我自己回答的是自己開發組件面臨的問題。完全不用擔心對方到時候打電話核對的問題。 2019的5月9號,離發工資還有1天的時候,我的領導親切把我叫到辦公室跟我說:阿郭,我們公司要倒閉了,錢是沒有的啦,為了不耽誤你,你趕緊出去找工作吧。聽到這話,我虎軀一震,這已經是第2個月沒工資了。 公...
摘要:以上是面試中筆試涉及到的知識點或者后面被問到的只是點。也許是根據薪資和面試的等級來出題的。我剛面試完回家,吃了一個泡面,回憶下面試題。同時作為傳遞到構造函數,執行了一次讓構造函數里面的屬性和方法賦值了一份給。 css 如何水平垂直居中,請盡量多說幾種方法?很尷尬,我多次面試都被問到這個問題,fuck 定位(回答了)、table-cell布局、flex布局、translate+relat...
摘要:以上是面試中筆試涉及到的知識點或者后面被問到的只是點。也許是根據薪資和面試的等級來出題的。我剛面試完回家,吃了一個泡面,回憶下面試題。同時作為傳遞到構造函數,執行了一次讓構造函數里面的屬性和方法賦值了一份給。 css 如何水平垂直居中,請盡量多說幾種方法?很尷尬,我多次面試都被問到這個問題,fuck 定位(回答了)、table-cell布局、flex布局、translate+relat...
閱讀 1644·2021-11-24 09:39
閱讀 3083·2021-11-22 15:24
閱讀 3091·2021-10-26 09:51
閱讀 3276·2021-10-19 11:46
閱讀 2891·2019-08-30 15:44
閱讀 2217·2019-08-29 15:30
閱讀 2537·2019-08-29 15:05
閱讀 773·2019-08-29 10:55