horizontal center and vertical middle in CSS

ConardLi 發布于2019-08-21 10:54 / 2623人閱讀

摘要：這個實現的技巧在于，我們給目標元素的四個方位都設置了相對父元素為的距離，但是沒有最后一行就像四個方向都有一個同樣大小的力在拉扯著你，這時候產生的效果是呆在原地不動這時候是左邊的效果。

寫在前面的話：
1: 為了方便起見，接下來我都會把想要居中的元素，不管是一行text，還是一個div，都叫做‘目標元素’，把包含這個目標元素的叫做‘父元素’。（額。。。。這兩個名字如此不對稱，我也是醉了。）

2: 我會給一個元素設置一個同名的class和id，class用了寫一些實際上跟居中沒有關系的css，只是為了好看；id呢用來寫跟居中有關的css，免得混淆了。

Case 1: 最簡單的單行的行內元素（inline element）
HTML Code:


     aaaaa

CSS Code:

.child {
    height: 100px;
    width: 100px;
    background-color: #F7F00E;
}

#child {
    line-height: 100px;
    text-align: center;
}

垂直居中：只需要給父元素（＃child）設置‘等值’的height和line-height.
水平居中：當然就是text-align: center 就行了

Case 2: 一個div在另一個div里面居中
HTML code:


     Apple

CSS code:

#child {
    line-height: 100px;
    text-align: center;
}

case 2和case 1一樣，對于垂直居中來說，只需要設置等值的line-height和height就可以了。達到的效果是：
------->

Case 3: 多個div元素在父div元素中垂直水平居中
HTML code:


     Apple
     Orange

CSS code:

#child {
    line-height: 100px;
    text-align: center;
}

這時候，我們往＃child里面添加了一個div元素，如果我們保持我們之前的＃child的css代碼不變，這時候呈現的效果是：

因為我們給父元素＃child設置了100px的line-height,而line-height是可以繼承的，所以它里面的每一個div元素都通過繼承擁有了100px的line-height。這個時候還想依賴于line-height來實現垂直居中，顯然就不行了。對于這種情況，有多種解決方案：
1: table-cell ＋vertical-align
HTML code:


     Apple
     Orange

CSS code:

#child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

呈現的效果：

2: position relative + absolute ＋ margin
HTML code:


 
     Apple
     Orange

CSS code:

.parent {
    height: 90px;
    width: 90px;
    border: 1px solid black;
}
.child {
    height: 60px;
    width: 60px;
    background-color: #F7F00E;
}
#parent {
    position: relative;
}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;//修正中心點
}

先來看看效果的演進。從第一個圖到第二個圖是我們添加了＃parend和＃child里面的css的效果，但是這時候不包括＃child里面的最后一句 margin: -30px 0 0 -30px;。因為我們設置了top和left分別相對父元素間隔50%的距離，但是這個位移是以子元素也就是＃child的左上角為原點的，所以如果我們想要達到子元素（＃child）和父元素（＃parent）的中心重合的話，還得再次向左和向上分別移動寬度和高度的一半的距離，也就是＃child里面最后一句代碼做的事情。那30px，其實就是＃child一半的寬度和高度。
----> ---->

3: position relative + absolute + margin auto
HTML code:

 
     Apple
     Orange

CSS code:

.parent {
    height: 90px;
    width: 90px;
    border: 1px solid black;
}
.child {
    height: 60px;
    width: 60px;
    background-color: #F7F00E;
}
#parent {
    position: relative;
   }
#child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

這個實現的技巧在于，我們給目標元素＃child的四個方位都設置了相對父元素為0的距離，但是沒有最后一行 margin: auto;就像四個方向都有一個同樣大小的力在拉扯著你，這時候產生的效果是呆在原地不動,這時候是左邊的效果。但是，當我們添加了最后一行代碼：margin: auto;我們的目標元素就會跑到父元素的正中間。margin: 0 auto; 常常被我們用來設置水平位置的居中，所以當我們給它四個方向都設置auto的時候，它就只能在父元素的正中間了。
--->

GPU云服務器云服務器 css-in-js vertical Middle horizontal

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86387.html

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
16種水平居中垂直居中方法

摘要：原文鏈接水平居中若是行內元素給其父元素設置即可實現行內元素水平居中若是塊級元素該元素設置即可若子元素包含屬性為了讓子元素水平居中則可讓父元素寬度設置為并且配合作如下設置是中給屬性新加的一個屬性值它配合可以輕松實現水平居中原文鏈接水平居中 1) 若是行內元素, 給其父元素設置 text-align:center,即可實現行內元素水平居中.2) 若是塊級元素, 該元素設置 margin...

jerry 2019-08-30 15:54 評論0 收藏0
CSS那些事兒——居中布局

摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現今自己了解的居中布局方法作個小總結。水平居中行內元素在包含的父元素定義屬性為。垂直水平居中對于這個問題，可以綜合上述點進行實現。前言居中布局，是前端頁面最常見的一種布局需求。剛開始學習前端時還是困擾了一段時間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現今自己了解的居...

JeOam 2019-08-29 13:05 評論0 收藏0
CSS進階篇--div中的內容垂直居中的五種方法

摘要：二內邊距法另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用將內容垂直居中，比如這段代碼的效果和法差不多。一、行高（line-height）法如果要垂直居中的只有一行或幾個文字，那它的制作最為簡單，只要讓文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hi...

fjcgreat 2019-08-28 18:17 評論0 收藏0