【css基礎修煉之路】— 談談元素的垂直水平居中

時間 2019-11-12

原文原文鏈接

做爲一個初級的前端工程師,在開發的過程當中遇到了許多問題,其中使元素垂直居中這個問題難住了我,可能在你們看來這是一個很是小的問題,可是卻困擾了我很長時間,因而決定作一個總結!!!html

廢話很少說,直接上代碼,裏面有個人思考過程
前端

案例一前端工程師

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>div實現垂直居中</title>
</head>
<style>
.abc {
    width: 200px;
    height: 200px;
    background: green;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.box {
    position: relative;
    width: 500px;
    height: 500px;
    background: red;
    display: inline-block;
}
</style>
<div class="box">
    <div class="abc"> </div>
</div>

<body>
</body>

</html>

案例二(文字的水平垂直居中)spa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
    div {
        height: 300px;
        width: 200px;
        display: table;
        background: #666;
    }

    span {
        display: table-cell;
        vertical-align: middle;
    }
    </style>
    <div>
        <span>我是span</span>
    </div>
</body>

</html>

案例三code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>div實現垂直居中</title>
</head>
<style>
.abc {
    width: 200px;
    height: 200px;
    background: green;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

.box {
    position: relative;
    width: 500px;
    height: 500px;
    background: red;
    display: inline-block;
}
</style>
<div class="box">
    <div class="abc"> </div>
</div>

<body>
</body>

</html>

案例四htm

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>div實現垂直居中</title>
</head>
<style>
/*
table-cell實現居中
將父盒子設置爲table-cell元素，設置
text-align:center,vertical-align: middle;
子盒子設置爲inline-block元素
*/

.ok {
    width: 200px;
    height: 200px;
    background: red;
    display: table-cell;
    /*這個必須是table-cell*/
    /*父級是一個小表格,表格默認是放文字的,子集是一個小果凍元素,給父級設置vertical-align:middle使元素垂直居中*/
    text-align: center;
    vertical-align: middle;
}

.innerBox {
    width: 100px;
    height: 100px;
    background: green;
    display: inline-block;
    /*注意:裏面的元素必須是inline-block*/
}
</style>

<body>
    <div class="ok">
        <div class="innerBox">
        </div>
    </div>
</body>

</html>

案例五blog

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style>
    /* 注意:該方法值適合文字的水平垂直居中;
     * 父級高度固定，嵌套行內元素
     *關鍵屬性：父級:diaplay:tabel; 子集：display:tabel-cell; vertical-align:middle;
     */

    .div {
        height: 300px;
        width: 200px;
        display: table;
        /*這麼理解:父級是一個固定寬度高度的大表格*/
        background: #666;
    }

    .span {
        display: table-cell;
        /* 子集是父級表格裏面的一個小格,設置display:table-cell,給父級設置垂直居中*/
        vertical-align: middle;
    }
    </style>
    <div class="div">
        <div class="span">sddddd</div>
    </div>
</body>

</html>

相關標籤/搜索

每日一句

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