美文网首页
CSS元素垂直水平居中的几种方法

CSS元素垂直水平居中的几种方法

作者: 再见地平线_e930 | 来源:发表于2020-04-11 23:37 被阅读0次

方法一:flex布局

注意:是父元素设置flex

                                                                 结果:

方法二:子绝父相,子元素top,bottom,left,right为0  margin:auto

                                                            结果:


方法三:子绝父相,子元素top,left为50%,transform: translate(-50%, -50%)

                                                结果:

方法四:子绝父相,如果子元素宽、高已知,子元素top,left为50%,margin-top、margin-left分别向上和向左移动子元素宽高的一半

这里子元素的宽高都为100px

                结果:

相关文章

  • CSS - 垂直水平居中方法

    前言 总括:整理 css 垂直水平居中方法,区分内联元素与块级元素 CSS垂直居中和水平居中 用css让一个容器水...

  • 垂直居中,水平居中

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

  • CSS水平居中和垂直居中的方法

    本篇文章主要介绍本人最近在CSS学习中整理总结出的水平&垂直居中的几种方法 水平居中 子元素为行内元素、单个块状及...

  • 2020-03-05 CSS水平垂直居中学

    1.块级元素水平居中,水平元素垂直居中 CodePen:CSS块级水平居中 2.块级元素垂直居中 CodePen:...

  • 定位和居中问题

    CSS的居中分水平居中和垂直居中,如果要让元素水平、垂直同时据中,不同情况下有不同的方法 分类: 居中元素大小是固...

  • css 水平垂直居中实现方式

    css 水平垂直居中实现方式 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 块级元素结构 ...

  • css水平、垂直居中的方法

    css居中常用的几种方式 行内元素水平、垂直居中 方案一(不设置居中元素宽高),代码如下:使用display: t...

  • 面试之道 - 元素实现水平垂直居中的CSS解决方案

    声明:文章转载自《面试之道 - 元素实现水平垂直居中的CSS解决方案》 写出几种常见的水平垂直居中方式。 这是一个...

  • Flexbox实现元素的水平居中和垂直居中

    网上有N种方法实现元素的水平居中和垂直居中,如CSS制作水平垂直居中对齐,这些方法各有各的优缺点。在这里,我们使用...

  • CSS居中小结

    下面是CSS居中的几种方法: 水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform 方式...

网友评论

      本文标题:CSS元素垂直水平居中的几种方法

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