CSS水平居中和垂直居中

時間 2019-11-08

標籤 css 水平居中垂直欄目 CSS 简体版

原文原文鏈接

CSS水平居中和垂直居中

行內元素居中

水平居中

1.給父元素設置text-align:centerjavascript

<div style="text-align: center">
    <span>行內元素span居中</span>
</div>

2.flex佈局
設置父元素display:flex;justify-content:center;html

<div style="display:flex;justify-content:center;">
    <span>行內元素span居中</span>
</div>

垂直居中

1.父元素高度肯定的單行文本(行內元素),可設置line-height等於父元素高度java

<div style="height: 100px;">
    <span style="line-height: 100px;">坦克</span>
</div>

2.父元素高度肯定的多行文本(行內元素)
方法一:使用插入 table (包括tbody、tr、td)標籤,同時設置 vertical-align：middle( td 標籤默認狀況下就默認設置了 vertical-align 爲 middle，因此咱們不須要顯式地設置了。)佈局

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>父元素高度肯定的多行文本</title>
    <style>
        .wrap {
            height: 300px;
            background: #ccc
        }
    </style>
</head>

<body>
<table>
    <tbody>
    <tr>
        <td class="wrap">
            <div>
                <p>看我是否能夠居中。</p>
                <p>看我是否能夠居中。</p>
                <p>看我是否能夠居中。</p>
                <p>看我是否能夠居中。</p>
                <p>看我是否能夠居中。</p>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<table>
    <tbody>
    <tr>
        <td class="wrap">
            <div>
             <img src="" title="圖片"/>
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

方法二:設置塊級元素的 display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align 屬性flex

<div class="container" style="display:table-cell;vertical-align:middle;">
    <div>
        <p>坦克</p>
        <p>航母</p>
    </div>
</div>

塊級元素居中

水平居中

1.定寬塊狀元素,設置左右margin值爲autospa

<div style="width: 300px;margin: 20px auto;">
         <p>坦克</p>
         <p>航母</p>
</div>

2.不定寬塊狀元素方法
方法一:加入table標籤,table標籤長度自適應性,即不定義其長度也不默認父元素body的長度(其長度根據其內文本長度決定),能夠看作一個定寬的元素,而後利用定寬塊狀居中的margin方法,使其水平居中code

<table style="margin: 20px auto;">
    <tbody>
    <tr>
        <td>
            <div>
               <p>坦克</p>
               <p>航母</p>
            </div>
        </td>
    </tr>
    </tbody>
</table>

方法二:改變塊級元素的 display 爲 inline類型(設置爲行內元素顯示),而後使用text-align:center來實現居中效果orm

<head>
    <meta charset="utf-8">
    <title>不定寬塊狀元素水平居中</title>
    <style>
        .container {
            text-align: center;
            border: 1px solid red;
        }
        .container ul {
            list-style: none;
           
            display: inline;
        }
        .container li {
            margin-right: 8px;
            display: inline;
        }
    </style>
</head>
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</html>

方法三:經過給父元素設置 float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。htm

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>不定寬塊狀元素水平居中</title>
    <style>
        .container {
            float: left;
            position: relative;
            left: 50%
        }
        .container ul {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
            left: -50%;
        }
        .container li {
            float: left;
            display: inline;
            margin-right: 8px;
        }
    </style>
</head>

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</html>

垂直居中

1.利用CSS屬性transform:translate(x,y)圖片

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style>
        .container {
            border:solid 1px red;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

    </style>
</head>
<body>
<div class="container">
    垂直居中
</div>
</body>
</html>

2.利用flex佈局(不定高不定寬)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style>
        .container {
            height:300px;
            display:flex;
            align-items:center;
            justify-content:center;
            border:1px solid #cc3f13;
        }

    </style>
</head>

<body>
<div class="container">
    <div style="border:solid 2px green;width: 100px;height: 100px;">垂直居中</div>
</div>
</body>
</html>

3.設置position:absolute或fiexed,另外margin設置爲auto

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            border:solid 1px blue;
            position: absolute;/*或fixed*/
            /*上下居中*/
            top:0;
            bottom:0;
            /*左右居中*/
            left:0;
            right:0;
            margin: auto;
        }
    </style>
</head>

<body>
<div class="container">
    <span>居中</span>
</div>
</body>
</html>

相關標籤/搜索

每日一句

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