【翻譯】CSS水平和垂直居中的12種方法

時間 2019-11-17

標籤翻譯 css 水平垂直居中方法欄目 CSS 简体版

原文原文鏈接

在CSS中有許多不一樣的方法可以作到水平和垂直居中，但很難去選擇合適的那個。我會向你展現我所看到的全部的方法，幫助你在所面對的情境下選擇最棒的那一個。html

方法1

此方法將只能垂直居中單行文本。只需將行高設置爲對象的高度，文本就會居中。web

<div class="container">content</div>

CSS:瀏覽器

.container {
    height: 100px;
    line-height: 100px;/*與div等高*/
}

優勢：
1.兼容全部瀏覽器
2.當沒有足夠的空間時，文字不會被切斷測試

缺點：
1.只對文本有效（不能塊級元素）
2.當爲多行文字而不僅一行時（如文字換行），這種方法破壞十分嚴重flex

此方法對小的元素很是有用，好比將按鈕或單行文本字段中的文本垂直居中。網站

方法2

此方法使用絕對定位的div，它的top爲50%，上邊距設置爲內容高度一半的負值。這意味着對象必須有一個固定的高度，這是被CSS定義了的。由於它有一個固定的高度，你可能須要給容器div設置overflow：hidden，所以若是內部有太多的內容時，滾動條就會出現，而不是內容在在div外繼續排列！flexbox

<div class="container">content</div>

CSS:spa

.container {
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;/* 負的高度的一半 */
}

優勢：
1.兼容全部瀏覽器
2.不須要嵌套的標籤firefox

缺點：
1.當沒有足夠的空間時，內容會消失（好比當div在body內部而且用戶縮小瀏覽器窗口，滾動條不會出現）

咱們能夠修改上面的CSS代碼使div垂直和水平居中。
CSS:

#wrap {
    width: 200px;
    height:200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;/* 寬度/2 */
    top:50%;
    margin-top: -100px;
}

方法3

此方法設置一些div的display和table相似，因此咱們可使用table的veitical-align屬性（這個屬性對其餘元素的效果很不同）。

<div id="container">
    <div id="content">content</div>
</div>

CSS:

#container {
    height: 300px;
    display: table;
}
#content {
    display:table-cell;
    vertical-align: middle;
}

優勢：
1.內容能夠動態改變高度（這樣不用必定得在CSS中定義）
2.當容器沒有足夠的空間時，內容不會被切斷。

缺點：
1.IE低版本不支持
2.須要不少嵌套的標籤（真的很差，這是一個很主觀的話題）

因爲這種方法不支持ie6-7，因此若是你想解決這個問題，只需添加一個新的div來使用hack方式。

<div class="table">
    <div class="tableCell">
        <div class="content">content</div>
    </div>
</div>

CSS:

.table {
    height: 300px;/
    width: 300px;
    display: table;
    position: relative;
    float:left;
}       
.tableCell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;         
    padding: 10px;
    *position: absolute;
    *top: 50%;
    *left: 50%;
}
.content {
    *position:relative;
    *top: -50%;
    *left: -50%;
}

方法4

在這種方法中，咱們將在內容元素前加一個div。這個div將設置爲height:50%;而且margin-bottom爲內容高度的一半。而後內容清除浮動，內容將會居中。
你應該注意到，若是內容元素在body內，咱們須要設置height:100%。

<body>
    <div id="floater"><!--This block have empty content --></div>
        <div id="content">Content section</div>
</body>

CSS:

html,body {height: 100%;}
    #floater{
        float:left;
        height:50%;
        margin-bottom: -120px;/*240px/2*/
}
#content {
    clear:both;
    height: 240px;
    position: relative;
}

優勢：
1.兼容全部瀏覽器
2.當沒有足夠的空間（即窗口縮小）時咱們的內容不會被切斷，滾動條會出現。

缺點：
1.須要一個額外的空元素

查看demo

方法5

該方法設置一些div來像table同樣顯示，因此咱們能夠像方法3同樣使用table的vertical-align屬性，可是對於IE，咱們須要添加一個inline水平的標籤，塊級水平的標籤是沒有任何用的。

<p class="table">
    <span class="tableCell">Centering multiple lines <br>in a block 

container.</span>
    <!--[if lte IE 7]><b></b><![endif]-->
</p>

CSS:

<style type="text/css">             
.table {
    border: 1px solid orange;
    display: table;
    height: 200px;
    width: 200px;
    text-align: center;
}
.tableCell {
    display: table-cell;
    vertical-align: middle;
}
</style>
<!--[if lte ie 7]>
<style type="text/css">
.tableCell {
    display: inline-block;
}
b {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 1px;
}
</style>
<![endif]-->

優勢：
內容能夠動態改變高度

缺點：
不少嵌套標籤

方法6

此方法設置display:inline-block，添加父元素的高度爲固定數值或百分比。

<div id="parent">
    <div id="vertically_center">
        <p>I am vertically centered!</p>
    </div>
    <div id="extra"><!-- ie comment --></div>
</div>

CSS:

<style type="text/css">
html,
body{
    height: 100%;
}
#parent {
    height: 500px;
    border: 1px solid red;
}
#vertically_center,
#extra {
    display: inline-block;
    vertical-align: middle;
}
#extra {
    height: 100%; 
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
/*IE6-7not  support display:inline-block,so we need a hack*/
#vertically_center,
#extra {
    display: inline;
    zoom: 1;
}
#extra {
    width: 1px;
}
</style>
<![endif]-->

優勢：
兼容全部瀏覽器

缺點：
須要添加父級的高度，併爲IE寫一個hack，另外，須要不少標籤。

查看demo

方法7

該方法用於多行文本和高度是可變的時候，咱們須要設置給頂部和底部一樣的padding。

<div class="columns">
    <div class="item">test</div>
</div>

CSS:

.item {padding-top:30px;padding-bottom:30px;}

優勢：
簡單且兼容全部瀏覽器

缺點：
若是高度是固定的，此方法無效的。

方法8

如今讓咱們來看看如何使用jQuery來居中。

<div class="container">
    <p>Centered in the middle of the page with jQuery</p>
</div>

CSS:

.container{
    background-color:#338BC7;
    width:270px;
    height:150px;
}

jQuery:

$(document).ready(function(){
    $(window).resize(function(){
        $('.container').css({
            position:'absolute',
            left: ($(window).width() -$('.container').outerWidth())/2,
            top: ($(window).height() - $('.container').outerHeight())/2
        });
    })
    $(window).resize();
});

優勢：
簡單且兼容全部瀏覽器

缺點：
須要jQuery，若是JavaScript被禁用將會失效

方法9

在這種方法中，咱們使用CSS3的新屬性：flexbox。

<body>
    <img src="//vertical.jpg" alt="flexbox way" />
</body>

CSS:

*{
  margin: 0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;/*for firefox*/
}

優勢：
簡單且在響應式設計中效果十分棒

缺點：
在有些瀏覽器中不起做用，由於其不支持flexbox

方法10

若是網站有彈窗，咱們不知道它的大小，但咱們老是但願它能在大多數的設備里居中。

<div class="container">
    <div class="cotent-header">Popup title</div>
    <div class="content-body">pop up in the window</div>
</div>

CSS:

*{
  margin: 0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.container {
  border: 1px solid #bbb;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0,0,0,.5);
  position:absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.content-header {
  padding: 10px 20px;
  background: rgba(0,0,0,.25);
  color:#fff;
}
.content-body{
  padding: 20px;
  background: #fff;
}

優勢：
老是以不一樣的設備屏幕爲中心

缺點：
實現有一點難，在一些瀏覽器中無效

方法11

在這種方法中，咱們使用僞元素（:before和:after）來垂直居中網站中的對象。

<body>
    <div>Make it centered in the window</div>
</body>

CSS:

*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
html,
body {
  height:100%;
}
div {
  display:inline-block;
  vertical-align: middle;
  width: 99.5%;
}
body:after {
  content:"";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0px;
}

優勢：
在現代瀏覽器中工做得很好

缺點：
複雜和更多的CSS代碼。

方法12

這個方法，我認爲是使對象在網站中垂直居中最簡單的方法。

<body>
    <div>Make it centered in the window</div>
</body>

CSS:

#center {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
}

優勢：
容易，在現代瀏覽器中工做得很好

缺點：
也須要height: 100%;(實際上是指用absolute定位須要，用fixed定位不須要)

兼容性注意事項

正如你所知，IE是惟一給你帶來問題的主要瀏覽器，你須要測試IE的舊版本去解決兼容性問題。

結論

除了上面我收集的，還有其餘的一些方法能夠作到垂直和水平居中的網站，若是你有其餘的方法，請在評論區分享。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。