css实现垂直水平居中的方法(个数不限)?

Posted 三高娘子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css实现垂直水平居中的方法(个数不限)?相关的知识,希望对你有一定的参考价值。

方法一:使用绝对定位

          大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的;

给居中元素添加如下样式:

.Absolute-Center {
        border:2px solid red;
        height: 200px;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
    }

缺点:内容容易溢出,建议使用overflow:auto;

方法二:负margin方法

给居中的div设置样式:

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .Absolute-Center {
        width: 400px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -200px;
    }
</style>
<body>
<div class="Absolute-Center">
</div>
</body>

方法三:css3的 transform 来实现

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .mydiv {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 200px;
    }
</style>
<body>
<div class="mydiv" style="border: 2px solid red;"></div>
</body>

http://blog.csdn.net/freshlover/article/details/11579669

 

以上是关于css实现垂直水平居中的方法(个数不限)?的主要内容,如果未能解决你的问题,请参考以下文章

HTML CSS中如何实现DIV中的图片水平垂直居中对齐

CSS实现垂直居中的7种方法

CSS水平居中+垂直居中+水平/垂直居中的方法总结

CSS实现垂直居中的常用方法

css常用代码片段 (更新中)

前端面试CSS系列——DIV垂直水平居中