CSS居中总结大全

huakaiwuxing

2019-07-01

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的元素

<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水平垂直居中

<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
很厉害的方式

<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端有兼容问题

<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>

css垂直居中 text-align css