常用元素水平垂直居中方案

hiyang 发布于2019-08-30 15:44 / 1271人阅读

摘要：实现水平垂直居中适用场景父子宽高都可未知比较推荐这种方式，简单，而且目前兼容性也不错。绝对定位加上负适用场景父元素宽高已知未知都行，但是首先得有宽高。

flex实现水平垂直居中

适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。)

绝对定位加上负margin

适用场景：父元素宽高已知未知都行，但是首先得有宽高。其次子元素的宽高必须已知，因为需要设置子元素的负margin. (也可以将负margin设置成translate来做位移实现)

绝对定位 + auto margin

适用场景：父子元素宽高都未知的情况(该方式不需要明确知道子元素宽高，子元素宽高可用百分比，对于子元素宽高不确定需要居中的情况比较适合。)

网格布局

适用场景：父子元素宽高未知，兼容性不大好

Table-cell + text-align + vertical-align

适用场景: 父元素大小已知（非百分比高度），子元素大小未知，但子元素须为行内块元素，较好的兼容性

伪元素

适用场景：父子宽高都可未知，子元素需为行内块元素(这种方式其实就是使用伪元素的高度为100%，子元素和伪元素都设置 vertical-align: middle实现垂直居中的效果)

云服务器 GPU云服务器水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116202.html

css垂直水平居中解决方案

摘要：写在前面垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。我们把需要垂直水平居中的设置为。使用使块级元素垂直居中是很简单的。写在前面：垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。下面，我们来讲讲几个css中常用的垂直水平居中的解决方案方法1: 1、把外层的div的显示方式设置为table，即display: table...

taoszu 2019-08-29 14:18 评论0 收藏0
水平垂直居中

摘要：笔记整理之一水平垂直居中固定宽高一般使用负值进行居中不固定宽高一般使用和进行下面三种方案平常都很少被使用的到移动端一般使用方案在移动端都可以使用文本水平垂直居中文本垂直文本垂直居中移动端水平垂直居中垂直居中方案快级元素笔记整理之一：水平垂直居中 PC固定宽高、一般使用maring负值进行居中PC不固定宽高、一般使用relative和left进行下面三种方案平常都很少被使用的到 ...

incredible 2019-08-30 12:43 评论0 收藏0
水平垂直居中

摘要：笔记整理之一水平垂直居中固定宽高一般使用负值进行居中不固定宽高一般使用和进行下面三种方案平常都很少被使用的到移动端一般使用方案在移动端都可以使用文本水平垂直居中文本垂直文本垂直居中移动端水平垂直居中垂直居中方案快级元素笔记整理之一：水平垂直居中 PC固定宽高、一般使用maring负值进行居中PC不固定宽高、一般使用relative和left进行下面三种方案平常都很少被使用的到 ...

eechen 2019-08-01 14:54 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0