美文网首页
CSS设置垂直水平居中

CSS设置垂直水平居中

作者: 梅林怒伯爵笑 | 来源:发表于2020-02-13 21:58 被阅读0次

水平居中一般都很常见,设置text-align:centeralign:center样式基本就可以,比较麻烦的是垂直水平居中。

第一种方法————未知元素width、height的px值:

div
{
    width: 300px;
    height: 300px;
    background-color: #ffff00;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

第二种方法————已知元素的width、height的px值:

div
{
    width: 300px;
    height: 300px;
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;     /*1/2width*/
    margin-left: -150px;    /*1/2height*/
}

相关文章

  • 垂直居中,水平居中

    CSS设置行内元素的水平居中 CSS设置行内元素的垂直居中 CSS设置块级元素的水平居中 CSS设置块级元素的垂直居中

  • CSS display: table-cell 用于水平垂直居中

    CSS display: table-cell 用于水平垂直居中 在 CSS 设置居中时候,水平和垂直居中的设置略...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • 设置居中样式

    在css中居中效果可以分为:水平居中、垂直居中、水平垂直居中三种。最近小程序开发项目中也经常遇到居中效果设置问题,...

  • 动态设置div css属性

    jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取D...

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • 前端秘籍,CSS垂直居中必学八式,一招一式尽显功力

    前言 设计网页的时候,除了CSS水平居中的需求外,还会经常遇到CSS垂直居中的需求,CSS垂直居中跟CSS水平居中...

  • css关于居中的方式

    父元素没有固定宽高 水平垂直居中 html: css: 水平居中 不确定子元素宽高 设置水平居中,先将子元素转化为...

  • css 居中

    居中有水平居中和垂直居中。 水平居中+垂直居中 flex法 position法 就是计算呗~ 参考 CSS各种居中...

  • CSS设置垂直水平居中

    水平居中一般都很常见,设置text-align:center或align:center样式基本就可以,比较麻烦的是...

网友评论

      本文标题:CSS设置垂直水平居中

      本文链接:https://www.haomeiwen.com/subject/tuhrfhtx.html