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 教程
• 算法总结-双指针
• 算法总结-回溯法