CSS居中總結大全

時間 2019-11-08

標籤 css 居中總結大全欄目 CSS 简体版

原文原文鏈接

CSS中居中的幾種方式

1.水平居中margin：0 auto；塊級元素在塊級元素中居中設置在子元素上，前提是不受float影響
2.text-align只對行級元素有用,行級元素設置浮動，或者設置定位以後。給它的父元素設置text-aglin：center不會使它在父元素中居中
3.margin:0 auto對於已經定位的元素沒有做用,已經定位的元素靠left和top定位
4.text-align只能讓其div包含的行級元素中的文字或者是行塊級元素中的文字水平居中
5.text-align這個屬性只做用於文本元素，在p標籤中在沒有border的狀況下，做用於讓文本在div中居中，在文本有border**的狀況下，做用於讓文本內容在border範圍內居中。這時如果想讓p標籤總體在div中居中，則須要設置margin：0 auto來達到居中效果

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:3px solid red;
            <!--1.text-align: center;-->
            /*1.對塊級元素沒有用，只對行級元素有用*/
            /*1.當img是行級元素時text-align起做用*/
        }
        img{
            /*2.display: block;*/
            width: 100px;
            height: 100px;
            /*2.margin: 0 auto;*/
        }
    </style>
</head>
<body>
<div class="box">
    <img src="../resources/2.jpg" alt="">
</div>
</body>

2.水平垂直居中
須要水平垂直居中的元素減去margin的寬高一半，這個方法一樣適用於float的元素flex

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:3px solid red;
            position: relative;
        }
        img{
            /*display: block;*/
            <!--不管img是行級元素仍是塊級元素定位都能使元素水平垂直居中-->
            width: 100px;
            height: 100px;
            position: absolute;
            top:50%;
            <!--使元素到距離參照元素的下面的百分之五十-->
            left: 50%;
            <!--使元素到距離參照元素的左面的百分之五十-->
            <!--此時元素位於參照元素中心的左下角-->
            margin-top:-50px ;
            <!--所以將元素往上移本身高度的一半-->
            margin-left: -50px;
            <!--往左移本身寬度的一半-->
        }
    </style>
</head>
<body>
<div class="box">
    <img src="../resources/2.jpg" alt="">
</div>
</body>

margin-auto水平垂直居中code

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:3px solid red;
            position: relative;
        }
        img{
            /*display: block;*/
            width: 100px;
            height: 100px;
            margin: auto;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="../resources/2.jpg" alt="">
</div>
</body>

水平垂直居中（三）
絕對定位和transfrom
很厲害的方式orm

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:3px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div class="box">
    <img src="../resources/2.jpg" alt="">
</div>
</body>

水平垂直居中（四）
利用C3的新特性flex，在移動端使用完美，pc端有兼容問題it

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:3px solid red;
            display:flex;
            justify-content:center;
            align-items:center
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="../resources/2.jpg" alt="">
</div>
</body>

1. CSS 居中大全
2. css 居中總結
3. CSS居中總結
4. css居中總結
5. css中居中總結
6. CSS 居中大全【轉】
7. CSS 居中大全（轉）
8. CSS居中方案大全
9. CSS--居中方式總結
10. CSS樣式居中總結
更多相關文章...
• Docker 命令大全 - Docker教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 算法總結-雙指針
• 算法總結-回溯法

相關標籤/搜索

每日一句

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