css 水平居中的幾種實現方式

2020-12-16 前端雨爸

前言

設計是帶有主觀色彩的，同樣網頁設計中的 css 一樣讓人摸不頭腦。網上列舉的實現方式一大把，或許在這裡你都看到過，但既然來到這裡我希望這篇能讓你看有所收穫，畢竟這也是前端面試的基礎。

實現方式

1、text-align 方式

text-align 是入門最常用的屬性，根據字面意思是文本對齊用的。

只需在父級標籤上設置即可，雖然內部的子元素不管是塊級元素 or 非塊級元素都可以使用，但需注意塊級元素會佔用整行的寬度，文本是在這個寬度中作水平居中。

代碼舉例

頁面效果

2、定寬 margin auto 方式

這也是常見的水平居中方式，通過設置子元素的 margin 屬性來控制距離父元素的距離。需要注意：子元素如果是塊級元素，就最好設置寬度，不然就會佔滿於父元素，在通過 text-align 文本居中對齊就沒有意義了。對於非塊級元素必須要設置寬度。

代碼舉例

頁面效果

3、flex 方式

通過設置浮動布局來實現居中，這是相對上兩種方法某種程度上最簡單的實現，因為在其基礎上可以做更多布局的擴展，不用擔心破壞布局。

如果你不了解 flex 布局，可以看下這個連結：

https://eminoda.github.io/2018/08/20/css-flex/

設置 justify-content 輕鬆搞定定位：

代碼舉例

頁面效果

4、position + 浮動 方式

現在這兩種是比較有趣的定位方式，實際場景不建議使用，我是不願意別人這樣寫，腦袋還要轉個彎，來理解這樣布局的計算方式。

如果元素是塊級元素，通過 float 浮動屬性，將它的寬度「抹去」。然後通過對於上級元素的相對定位通過錯位修正的方式來居中。

讓父元素的左側從中間開始定位，子元素再根據自己的實際寬度往左偏移一半達到水平居中的目的。

代碼舉例

頁面效果

5、position + transform 方式

思路同上，不同的是這次設置子元素為絕對定位，並距離左側偏離一半，最後通過 transform 根據元素的實際寬度往左再偏移一半，達到居中效果。

代碼舉例

頁面效果

總結

上面只列舉了 5 種水平居中的實現方法，相信還要更多的方式。不過不管哪種方法，能在業務代碼實踐中最快速、最準確的運用才是最佳實踐。

希望在讀的各位能有所收穫。

關於我

一名工作在一線的前端工程師，樂於實踐，並分享前端開發經驗。

關注【前端雨爸】，歡迎評論留言，願與各位交流進步。

點擊 ↙ 了解更多，了解更多前端開發技術文章。！

相關焦點

  • css 垂直居中的幾種實現方式
    前言設計是帶有主觀色彩的，同樣網頁設計中的 css 一樣讓人摸不頭腦。網上列舉的實現方式一大把，或許在這裡你都看到過，但既然來到這裡我希望這篇能讓你看有所收穫，畢竟這也是前端面試的基礎。實現方式備註：如下頁面效果中的灰色方框高度都做了限定為 100 px（即父元素）1、line-height 方式line-height 設置行高，多用於控制多行文本之間的間隔大小。但利用它的特性也可以控制垂直居中。
  • CSS實現水平垂直居中的10種方式
    ，實則暗藏玄機，本文總結了一下CSS實現水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個github倉庫，歡迎大家star僅居中元素定寬高適用absolute + 負marginabsolute + margin autoabsolute + calc居中元素不定寬高absolute + transform
  • CSS實現水平垂直居中的1010種方式(史上最全)
    要實現上圖的效果看似很簡單，實則暗藏玄機，本文總結了一下CSS實現水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個github倉庫，歡迎大家star。點擊查看完整DEMOtable曾經table被用來做頁面布局，現在沒人這麼做了，但table也能夠實現水平垂直居中，但是會增加很多冗餘代碼<table>
  • 你知道CSS實現水平垂直居中的第10種方式嗎?
    /* 此處引用上面的公共代碼 *//* 此處引用上面的公共代碼 *//* 定位代碼 */.wp {    position: relative;}.box {    position: absolute;;    top: 50%;    left: 50%;    margin-left: -50px;    margin-top: -50px;}這是我比較常用的方式
  • HTML技巧篇:實現元素水平與垂直居中的幾種方式
    本篇文章主要給大家介紹一下如何使用html+css實現元素的水平與垂直居中效果，這也是我們網頁在編碼製作中會經常用到的問題。1）單行文本的居中主要實現css代碼：水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height與元素的height的值一致*/我們先來看這樣一個例子，加入我們這裡有一個
  • 對CSS居中的一點總結
    居中的技巧有很多，但在編寫代碼的過程中，發現有時候技巧管用，有時候不管用，於是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現需求的水平上。為了更好的加深對居中的理解，搜集和閱讀相關資料，發現不錯的文章將其整理出來。
  • CSS布局奇技淫巧:各種居中
    居中是我們使用css來布局時常遇到的情況。使用css來進行居中時，有時一個屬性就能搞定，有時則需要一定的技巧才能兼容到所有瀏覽器，本文就居中的一些常用方法做個簡單的介紹。 先來說幾種簡單的、人畜無害的居中方法 1. 把margin設為auto 具體來說就是把要居中的元素的margin-left和margin-right都設為auto，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。
  • 前端面試:CSS 如何實現水平居中和垂直居中
    行內元素的水平居中如果該元素是行內元素，只需設置 text-align: center; 即可實現水平居中。如圖，我們看到文本在 <textarea> 元素中實現了水平居中。多個塊級元素的水平居中第一種方法是採用 flexbox 布局(https://developer.mozilla.org/zh-CN
  • 常見的CSS文字居中顯示
    和vertical-align html<div> <span>測試文字</span></div>cssheight: 200px; overflow: hidden; background: #ccc; text-align: center;}.box span{ vertical-align: middle; line-height: 200px;}2、利用display:table-cell實現水平垂直居中顯示
  • CSS 垂直水平完全居中手冊
    （點擊上方公眾號，可快速關注）英文： css-tricks，翻譯：OurJShttp://ourjs.com/detail
  • css常見問題:塊級元素和行內元素在水平和垂直方向怎樣居中呢?
    相信大家在寫css樣式的時候會經常遇到這樣一個問題，那就是塊級元素和行內元素在水平和垂直方向怎麼居中呢？又怎麼即在水平方向居中，又在垂直方向居中呢？利用margin：0 auto進行水平方向居中css部分代碼示例：
  • CSS實現自適應分隔線的N種方法
    可能別人的重點不在這些上面吧下面列舉幾種更好的實現方式，不會露餡的那種1.偽元素+transform:translateX(-100%);主要原理是設置文本居中text-align: center;，然後給定兩個偽元素，分別絕對定位，那麼此時偽元素也是跟隨著水平居中的，設置足夠的寬度，然後把左邊的往左位移100%就可以了，父級記得超出隱藏。
  • CSS實例:水平居中和垂直居中的多種解決方案
    <div style="line-height:500px;height:500;"> 2、層水平居中  #parentdiv{  width: 500px;}#childdiv {  width: 200px;  margin:0 auto;} 3、層中的文字水平居中
  • CSS垂直居中、水平居中
    讓一個div或者一段文字亦或者一張照片居中顯示的問題，面試的過程中也經常被問到。
  • flex 多列水平居中 - CSDN
    CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的盒模型布局和比較新的flex布局實現），希望能給需要的小夥伴帶來一些幫助。
  • 23種CSS的垂直居中技巧,你都學會了嗎?
    ，而其困難度也始終沒有讓人輕鬆過，據說部分公司甚至將CSS的垂直居中技巧當成面試題，其重要性可見一斑，經過了Amos通靈了一下之後把垂直居中的寫法擴展到了23種，今天就帶著大家輕鬆的了解一下CSS的垂直居中的方式。
  • CSS垂直居中技巧,我只會23個,你會幾個?
    ~)，網頁CSS的垂直居中需求始終沒有停過，而其困難度也始終沒有讓人輕鬆過，經過了每位開發先烈的研究後，據說CSS的垂直居中技巧已達到近十種之多，但始終鮮為人知，部分公司甚至將CSS的垂直居中技巧當成面試題，其重要性可見一斑，經過了Amos通靈了一下之後把垂直居中的寫法擴展到了23種，今天就讓Amos帶著大家輕鬆的了解一下CSS的垂直居中的方式吧。
  • 公司的一個面試題:如何用CSS讓一個容器水平垂直居中?
    DOCTYPE html>   <html>      <head>          <meta charset="UTF-8">          <title>demo</title>      </head>      <body>          <style type="text/css
  • 將CSS樣式代碼應用到HTML頁面的幾種方式
    今天跟大家聊一聊將CSS樣式應用到網頁的幾種方式。大家好！今天跟大家聊一聊將CSS樣式應用到網頁的幾種方式。CSS的代碼須應用到HTML頁面中才能達到樣式設定的目的。應用方法一般有三種：行內式、內嵌式和連結式。
  • CSS的23個垂直居中技巧,你都學會了嗎?
    在不斷探索，發現中，CSS的垂直居中的方式竟然能達到23種，大家可以看看自己熟知的是哪幾種？1、Line-height適用情景：單行文字垂直居中技巧這個方式應該是最多人知道的了，常見於單行文字的應用，像是按鈕這一類對象，或者是下拉框、導航此類元素最常見到的方式了。