css 水平、垂直居中

時間 2019-11-29

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

原文原文鏈接

水平居中

行內元素

行內元素：（img、span、文字等行內元素），經過在父級元素設置 text-align:center 使元素水平居中。css

塊級元素

塊級元素：（div、p、h1...h六、ul、li等塊級元素），經過在要居中元素設置 margin:0 auto(上、右、下、左)，這裏表示上下0 左右自適應，達到元素水平居中。html

垂直居中

行內元素

行內元素：（img、span、文字等行內元素），經過在父級元素設置display: table-cell;vertical-align: middle; 使元素垂直居中，若是是單行文字或者其餘能夠設置line-height:容器高；css3

塊級元素

高度固定一般是使用web

絕對定位與負邊距
絕對定位與margin
display table-cell

高度不固定ide

display table-cell
translate
flex 佈局

仍是上代碼比較實在佈局

行內元素水平、垂直居中

文字、圖片水平、垂直居中

主要是利用flex

text-align: center; //水平對齊方式
display: table-cell;//以td形式渲染
vertical-align: middle;//垂直對齊方式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    * {
        padding: 0;
        margin: 10px 0 0 0;
    }

    div {
        width: 200px;
        height: 200px;
        border: solid 1px red;
    }

    img {
        width: 100px;
        height: 100px;
        border: 0px;
    }

    span {
        border: solid 1px blue
    }

    .div1 {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

    .div2 {
        line-height: 200px;
        text-align: center;
        margin: 0 auto;
    }
</style>
<body>

<p>文字</p>
<div class="div1" title="行內元素水平垂直居中">
    文字水平垂直居中1
</div>

<p>文字</p>
<div class="div2" title="行內元素水平垂直居中">
    文字水平垂直居中2
</div>

<p>圖片水平垂直居中</p>
<div class="div1" title="行內元素水平垂直居中">
    <img src="images/pro_1.jpg">
</div>

<p>span水平垂直居中</p>
<div class="div1" title="行內元素水平垂直居中">
    <span>this is span</span>
</div>
</body>
</html>

View Code

塊級元素水平、垂直居中

固定高度水平、垂直居中

固定高度水平垂直居中通常思路：this

絕對定位與負邊距

脫離文檔流以後，在經過設置負的邊距來達到水平、垂直居中效果；spa

  <style>
        * {
            padding: 0;
            margin: 0 0 0 0;
            box-sizing: border-box;
        }

        p{margin:20px 0 0 20px;}

        /*絕對定位與負邊距實現*/
        .divBox {

            height: 200px;
            border: solid 1px red;
            position: relative;
        }
        .divContentBox{
            width: 100px;
            height: 100px;
            border: solid 1px blue;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;

        }
    
    </style>

<p>絕對定位與負邊距實現</p>
<div class="divBox">
    <div class="divContentBox">固定寬度、高度水平垂直居中</div>
</div>

View Code

若是不能脫離文檔流就增長一個空的容器

<style>
  /*增長空容器與margin */

        #divBox{
            width: 200px;
            height: 200px;
            border: solid 1px red;

        }
       #nullBox{
           width: 100%;
           height: 50%;
           background-color: blue;
         }
        #divContentBox {
            width: 100px;
            height: 100px;
                margin: -50px auto;
            border: solid 1px red;

        }

</style>

<p>增長一個空的容器</p>
<div id="divBox">
    <div id="nullBox"></div>
    <div id="divContentBox">固定寬度、高度水平垂直居中</div>
</div>

View Code

利用絕對定位與margin

<style>
#div1Box{
           /*width: 200px;*/
           height: 200px;
           border: solid 1px red;
           position: relative;
       }
        #ContentBox{

            height: 100px;
           display: inline;
            border: solid 1px blue;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
</style>

<p>絕對定位與margin</p>
<div id="div1Box">
    <div id="ContentBox">固定高度水平垂直居中</div>
</div>

View Code

css3 transform

<style>

 #container{
            height: 300px;
            position:relative;
            border: solid 1px red;
        }
        #center{
            position: absolute;
            width:100px;
            height:100px;
            border: solid 1px red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
</style>

<p>css3 transform</p>
<div id="container">
    <div id="center">固定高度水平垂直居中</div>
</div>

View Code

display table-cell

<style> 
#container1{
            width: 600px;
            text-align: center;
            vertical-align: middle;
            border: solid 1px red;
            display: table-cell;
            height: 300px;
        }
        #center2{
            width: 100px;
            height: 100px;
            border: solid 1px red;
            display: inline-block;
        }
    </style>
<p>display table-cell</p>
<div id="container1">
    <div id="center2">>固定高度水平垂直居中</div>
</div>

View Code

高度不固定水平、垂直居中

display:table-cell

父元素設置 display: table-cell;3d
text-align: center;
vertical-align: middle; 能夠達到垂直居中；
子元素設置margin: 0 auto;能夠達到水平居中；

translate

子元素脫離穩檔流
top、left 偏移 50%
transform: translate(-50%, -50%);返回自身負的50%

flex佈局

子元素設置水平、垂直對齊方式justify-content: center;align-items: center;

完整代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*-- display table-cell */

        #root {
            width: 100%;
            display: table;
        }

        .bigBox {
            width: 100%;
            height: 200px;
            border: solid 1px red;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .content {
            width: 300px;
            background-color: green;
            margin: 0 auto;
        }

        /*translate */

        .parent {
            width: 100%;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background: #22B14C;
        }

        /*flex*/
        .parent1 {
            width: 100%;
            height: 200px;
            border: solid 1px red;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .child1 {
            background: green;
        }
    </style>
</head>
<body>

<div id="root">

    <div class="bigBox">
        <div class="content">
            <span>this is span</span><br/>

            <p>這是一個新的開始</p>

            <div>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="parent">
    <div class="child">
        <p>this is demo2</p>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </div>
</div>

<div class="parent1">
    <div class="child1">
        <p>this is demo3</p>

        <p>this is demo3</p>

        <p>this is demo3</p>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </div>
</div>

</body>
</html>

View Code

相關標籤/搜索

每日一句

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