html怎么水平上下剧中,【HTML/CSS】CSS实现垂直水平居中

末蓝、 2022-10-07 00:42 158阅读 0赞

相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法

元素已知宽度

绝对定位 + margin反向偏移

html

Sumon Test

![bVbpVW2?w=908&h=668][bVbpVW2_w_908_h_668]

元素未知宽度

绝对定位 + margin auto + 流体特性

html

Sumon Test

Tips

当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样：

1.如果一侧定值，一侧auto，auto为剩余空间大小；

2.如果两侧均是auto, 则平分剩余空间；

![bVbpVZv?w=947&h=654][bVbpVZv_w_947_h_654]

绝对定位 + transform反向偏移

html

Sumon Test

![bVbpVXe?w=903&h=672][bVbpVXe_w_903_h_672]

flex布局

html

Sumon Test

Tips

1.justify-content 设置水平方向的元素位置

2.align-items 设置垂直方向的元素位置

![bVbpVXy?w=953&h=671][bVbpVXy_w_953_h_671]

table-cell布局

html

Sumon Test

Tips

1.vertical-align 设置元素的垂直对齐方式

2.text-align 设置元素中的文本的水平对齐方式

![bVbpVXS?w=955&h=666][bVbpVXS_w_955_h_666]

以上就是我对CSS实现垂直水平居中的总结，如有异议欢迎评论留言。

[bVbpVW2_w_908_h_668]: https://segmentfault.com/img/bVbpVW2?w=908&h=668
[bVbpVZv_w_947_h_654]: https://segmentfault.com/img/bVbpVZv?w=947&h=654
[bVbpVXe_w_903_h_672]: https://segmentfault.com/img/bVbpVXe?w=903&h=672
[bVbpVXy_w_953_h_671]: https://segmentfault.com/img/bVbpVXy?w=953&h=671
[bVbpVXS_w_955_h_666]: https://segmentfault.com/img/bVbpVXS?w=955&h=666

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关水平垂直居中

实现水平垂直居中的方法有很多，在这里我只介绍两种易用且常见的方法，这两种方法对于固定宽高和不定宽高都有效。 1、transform 方案 // html部分

Bertha 。/ 2023年08月17日 17:39/ 0 赞/ 167 阅读

相关水平/垂直居中

一. 水平居中 1.1行内或类行内元素（比如文本和链接）在块级父容器中让行内元素居中，只需使用 text-align: center;：这种方法可以

我就是我/ 2023年07月11日 05:36/ 0 赞/ 24 阅读

相关 css 实现水平垂直居中

一、通过设置子元素 .parent{ position: absolute; / 非static即可 / width: 500px;

忘是亡心i/ 2022年12月30日 10:39/ 0 赞/ 255 阅读

相关水平垂直居中

（1）水平居中：元素为行内元素，设置父元素text-align:center 如果元素宽度固定，可以设置左右margin为auto 如果元素为绝对定位（或

你的名字/ 2022年10月27日 12:28/ 0 赞/ 229 阅读

相关 html怎么水平上下剧中,【HTML/CSS】CSS实现垂直水平居中

相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法元素已知宽度绝对定位 + margin反向偏移 html Sumon Test ![bV

末蓝、/ 2022年10月07日 00:42/ 0 赞/ 159 阅读

相关 div水平与垂直剧中

不需兼容低版本浏览器 .box\{ display: flex; justify-content: center;

缺乏、安全感/ 2022年06月15日 23:23/ 0 赞/ 185 阅读

相关 CSS垂直水平居中方式大全(二)----水平垂直居中

1.利用绝对定位+transform(不固定宽高水平垂直居中) 示例: <!DOCTYPE html> <html> <head>

ゞ浴缸里的玫瑰/ 2022年06月04日 02:09/ 0 赞/ 439 阅读

相关 CSS垂直水平居中方式大全(一)----水平居中-垂直居中

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。一、水平居中

冷不防/ 2022年06月04日 01:53/ 0 赞/ 464 阅读

相关水平垂直居中

文档 [转载][Link 1] div绝对定位水平垂直居中(未知容器，已知元素宽高) 方案一：margin:auto实现绝对定位元素的居中 <!DO

青旅半醒/ 2022年01月19日 23:47/ 0 赞/ 412 阅读

相关水平垂直居中

几种水平垂直居中固定宽高 1. margin 负值 <div class="a"> <div class="a1"></div>

﹏ヽ暗。殇╰゛Y/ 2021年08月30日 01:18/ 0 赞/ 542 阅读