CSS实现水平和垂直居中

最新推荐文章于 2024-07-18 17:34:14 发布

huxiy1995

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量192

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/huxiy1995/article/details/79010522

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

css图片水平居中

1.利用margin: 0 auto实现图片水平居中

<div style="margin:0 auto; text-align: center;"></div>

2.利用文本的水平居中属性text-align: center

<div style="margin:0 auto; text-align: center;">
        <p>利用margin: 0 auto实现图片水平居中</p>
        <div class="innerDiv" style="display: inline-block;">
            <p>利用文本的水平居中属性text-align: center</p>
        </div>
</div>

css图片垂直居中

已知高度情况下

1.利用高==行高实现图片垂直居中

<div style="margin:0 auto;line-height:150px;text-align: center;">
        <div class="innerDiv" style="display: inline-block;vertical-align: middle;">
            <span style="top:-30px;position:relative">利用高==行高实现图片垂直居中</span>
        </div>
   </div>

2.利用绝对定位实现图片垂直居中

<div style="margin:0 auto;position:relative">
        <div class="innerDiv" style="position:absolute;left:50%;top:50%;margin-left:-125px;margin-top:-37.5px">
            利用绝对定位实现图片垂直居中
        </div>
    </div>

高度不确定情况下：

1.利用table实现图片垂直居中(IE兼容性！！！)

<div style="margin:0 auto;display: table; text-align: center;">
        <span style="display: table-cell; vertical-align: middle;">
            <div class="innerDiv" style="display: inline-block;">
                    利用table实现图片垂直居中
            </div>
        </span>
    </div>

2.移动端可以利用flex布局实现css图片垂直居中

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS居中</title>
    <style>
        div {
            width: 500px;
            height: 150px;
            background-color: #ccc;
            text-align: center;
        }

        .innerDiv {
            width: 50%;
            height: 50%;
            background-color: #FFF;
        }
    </style>
</head>

<body>

    <div style="margin:0 auto;">
        <p>利用margin: 0 auto实现图片水平居中</p>
        <div class="innerDiv" style="display: inline-block;">
            <p>利用文本的水平居中属性text-align: center</p>
        </div>
    </div>

    <br><br>
    <div style="margin:0 auto;line-height:150px">
        <div class="innerDiv" style="display: inline-block;vertical-align: middle;">
            <span style="top:-30px;position:relative">利用高==行高实现图片垂直居中</span>
        </div>
    </div>
    <br><br>
    <div style="margin:0 auto;display: table;">
        <span style="display: table-cell; vertical-align: middle;">
            <div class="innerDiv" style="display: inline-block;">
                    利用table实现图片垂直居中
            </div>
        </span>
    </div>

    <br><br>
    <div style="margin:0 auto;position:relative">
        <div class="innerDiv" style="position:absolute;left:50%;top:50%;margin-left:-125px;margin-top:-37.5px">
            利用绝对定位实现图片垂直居中
        </div>
    </div>

</body>

</html>