沒錯，css居中就是如此的簡單！

pkwenda 發布于2019-08-29 16:44 / 2632人閱讀

摘要：寫在前面居中方案是一個老生常談的問題，主要包括水平居中和垂直居中，水平居中大家用的比較多，最常用的莫過于方案了，而垂直居中，很多時候會讓很多新手頭疼。常用居中方案水平解決方案水平居中適用于已經知道寬度，并且其父級寬度不為的元素水平居中。

寫在前面

css居中方案是一個老生常談的問題，主要包括水平居中和垂直居中，水平居中大家用的比較多，最常用的莫過于margin:0 auto方案了，而垂直居中，很多時候會讓很多新手頭疼。

常用居中方案（水平）

margin：0 auto解決方案（水平居中）

適用于已經知道寬度，并且其父級寬度不為0的元素水平居中。



    哈哈哈哈

 

.parent {
    width:800px;
}
.child {
    width:20%;//也可以是固定像素
    margin:0 auto;
}

2.利用text-align:center使行內元素水平居中(水平居中)



   哈哈哈哈




div {
    text-align:center
}

3.flex水平居中



    哈哈哈哈



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

4.絕對定位利用負邊距居中(已知寬度)



    哈哈哈哈



.parent {
    position:relative;
}
.child {
    width:500px;
    position: absolute;
}

5.絕對定位不知寬度居中，可以利用css transform屬性，也可以利用flex居中



    哈哈哈哈



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

垂直居中方案

1.不知寬高，兼容性很高的居中方案。



    哈哈哈哈



.parent {
    position:relative;
}
.child {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

2.利用行高進行居中,行高和高度一致



    哈哈哈哈



.parent {
    height:50px;
    line-height:50px;
}

3.flex方案



    哈哈哈哈



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

4.transform方案



    哈哈哈哈



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

5.已知父級高度，利用margin-top進行居中，該方案過于簡單，就不貼代碼了
6.絕對定位，使用負邊距居中



    哈哈哈哈



.parent {
    position: relative;
}
.child {
  position: absolute;
  width:500px;
  height:500px;
  top: 50%;
  left: 50%;
  margin-top:-250px;
  margin-left:-250px;
}

還有一種是利用table方案居中，我覺得這種方案可能過時了，想了解的話可以自己百度一下

寫在最后

本文已經列出了大多情況下都可以解決的居中方案，還有一些比較居中，例如浮動元素居中可以參考絕對定位居中，如果不考慮兼容性的話，flex居中是最方便的方案，大家可以自由的去根據實際情況去選擇需要的方案

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

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

從頭開始 — CSS — 垂直居中

摘要：基于特有的屬性擁有內聯元素的特性同時可以定義寬高，我們可以設置一個行內塊用于定義高度，再讓其他內聯元素與其對齊，實現垂直居中。如果居中的元素超過了視窗會被裁剪掉。使用時，不僅在水平方向上將元素居中，垂直方向上也是如此。事實上，每次面試前端必問的問題就是這個。及其常見的需求，看起來似乎非常簡單，但是實現起來很費勁，尤其是涉及尺寸不固定的元素。本篇文章將介紹比較流行的幾種方法。行內塊...

wuaiqiu 2019-08-30 14:13 評論0 收藏0
從頭開始 — CSS — 垂直居中

摘要：基于特有的屬性擁有內聯元素的特性同時可以定義寬高，我們可以設置一個行內塊用于定義高度，再讓其他內聯元素與其對齊，實現垂直居中。如果居中的元素超過了視窗會被裁剪掉。使用時，不僅在水平方向上將元素居中，垂直方向上也是如此。事實上，每次面試前端必問的問題就是這個。及其常見的需求，看起來似乎非常簡單，但是實現起來很費勁，尤其是涉及尺寸不固定的元素。本篇文章將介紹比較流行的幾種方法。行內塊...

NoraXie 2019-08-01 18:43 評論0 收藏0
老生常談之CSS的垂直居中

摘要：在通常情況下，對那些需要居中的元素來說，其尺寸往往是由其內容來決定的。雖然沒有垂直居中效果，但也是完全可以接受的。的另一個好處在于，它還可以將匿名容器即沒有被標簽包裹的文本節點垂直居中。主要摘自：《CSS 揭秘》，強烈推薦的一本書。 44 年前我們就把人類送上月球了，但現在我們仍然無法在 CSS 中實現垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 評論0 收藏0
python

Python裝飾器為什么難理解？無論項目中還是面試都離不開裝飾器話題，裝飾器的強大在于它能夠在不修改原有業務邏輯的情況下對代碼進行擴展，權限校驗、用戶認證、日志記錄、性能測試、事務處理、緩存等都是裝飾器的絕佳應用場景，它能夠最大程度地對代碼進行復用。但為什么初學者對裝飾器的理解如此困難，我認為本質上是對Py… Python 實現車牌定位及分割作者用 Python 實現車牌定位及分割的實踐。 ...

chenatu 2019-07-30 15:35 評論0 收藏0