CSS整理（3）之讓元素水平居中和垂直居中方法

時間 2019-11-12

標籤 css 整理元素水平居中垂直方法欄目 CSS 简体版

原文原文鏈接

在html頁面中，爲了排版上的美觀或是在不一樣尺寸的屏幕上正常顯示，咱們通常都會將元素進行水平居中或是垂直居中，如今作一下總結：css

實現水平居中：html

對於行內元素來講，直接對要設置的元素設置text-align：center屬性就好了，代碼以下：佈局

 span{text-align:center;}

而對於塊狀元素來講，分爲元素定寬和不定寬兩種狀況：spa

當元素定寬時：左右margin值設爲auto或將右margin值設爲auto；如code

<style type="text/css">
    #nihao{
        width: 500px;
        margin: 20px auto;//也能夠是margin:auto;
        border: 2px solid red;
        background-color: olive
    }
    </style>
<body>
<div id="nihao">nb</div>
</body>

當塊狀元素不定寬度時，要實現水平居中，有以下方法：orm

1，加入table 標籤；table 自己不是塊級元素，若是不給它設定寬度的話，會由內部元素的寬度「撐開」，但即便不設定它的寬度，僅設置 margin-left:auto 和 margin-right:auto 就能夠實現水平居中。這種方法的缺點是加入了無語義標籤；代碼以下：htm

<style type="text/css">
table{margin-left:auto;margin-right:auto;}
.yanshi li{float:left;margin-right:5px;>
 </style>
</head>
<body>
<table>
    <tbody>
        <tr>
        <td>
             <ul class="yanshi">
             <li><a href="#">1</a></li>
             <li><a href="#">2</a></li>
             <li><a href="#">3</a></li>
             </ul> 
         </td>
         </tr>
     </tbody>
</table>

2 、設置display:inline;即把元素設置爲行內元素，採用text-align:center屬性值來將元素水平居中；但這種方法將元素設爲行內元素，就丟失了塊狀元素的特色，好比就不能設置寬度和高度，可能對整個佈局產生影響；代碼以下：圖片

<style type="text/css">
    .nihao{ 
        display: inline;
        background-color: olive;
        
    }
    </style>
</head>
<body>
<ul class="nihao">
<li a="#">1</li>
<li a="#">2</li>
<li a="#" >3</li>
</ul>

能夠看出若是要實現元素水平居中，很重要的一點是必須將父元素設置爲 it

text-align: center;

3,、設置給父元素設置float屬性後再設置position:relative;和left:50%;，而後給子元素設置position：relative；和left:50%，實現水平居中；如：io

<style type="text/css">
    .nihao{ 
        float:left;
        background-color: olive;
        position: relative;
        left: 50%;
    }
    .nihao li{
        position: relative;
        left: 50%;
    }
    </style>
</head>
<body>
<ul class="nihao">
<li a="#">1</li>
<li a="#">2</li>
<li a="#" >3</li>
</body>

讓元素垂直居中的方法：

一、單行文本的垂直居中：設置元素的height屬性和line-height屬性，如：

<style type="text/css">
    .parent{ width:800px;  margin:0 auto; border:1px solid red;}
    .parent p{border:1px dashed red; line-height:60px; margin:30px;}
    </style>
</head>
<body>
<div class="parent">
<p>bairiyishanjin</p>
</div>

二、多行文本的垂直居中：給塊級元素設置：display:table-cell;激活vertical-align屬性，

<style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        .nihao{
            display: table-cell;
            border:1px solid blue;
            vertical-align: middle;
            height:500px;
        }  
    </style>  
    <div class="nihao">  
        <p>你好！</p> 
    </div>

這種方法適用於各類狀況，無論是容器定高仍是不定高；

多行文本垂直居中還有一種方法：設置父元素的行高，將子元素inline-block化，將line-height設爲normal；將基線設置爲vertical-align:middle便可，代碼以下：

<div style="border:1px solid red;line-height: 300px;">
        <p style="display: inline-block;line-height: normal;vertical-align: middle;text-align: left;">你好，明天</p>
    </div>

三、對於行級元素來講，能夠直接設置它的：vertical-align:middle;可是此種狀況僅適用於行級元素；

設置圖片垂直居中顯示的作法
1.當圖片直接做爲背景圖片時:設置背景的高度，寬度能夠不設置，設置background-position:center;這種相對簡單；
2.設置div的height和img圖片一致,設置父div的text-align:center;設置img的vertical-align:middle;

3.固定圖片大小的設置：display:block;margin:0 auto;

這3種方法簡單高效，本人親測。