【HTML/CSS】CSS实现垂直水平居中

linkFly 发布于2019-08-30 15:56 / 2109人阅读

摘要：相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法元素已知宽度绝对定位反向偏移元素未知宽度绝对定位流体特性当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

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

元素已知宽度

绝对定位 + margin反向偏移

html

   
   
   
     
     
     Sumon Test

元素未知宽度

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

html

   
   
   
     
     
     Sumon Test

Tips

   当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。
   具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样：
   1.如果一侧定值，一侧auto，auto为剩余空间大小；
   2.如果两侧均是auto, 则平分剩余空间；

绝对定位 + transform反向偏移

html

   
   
   
     
     
     Sumon Test

flex布局

html

   
   
   
     
     
     Sumon Test

Tips

   1.justify-content 设置水平方向的元素位置
   2.align-items 设置垂直方向的元素位置

table-cell布局

html

   
   
   
     
     
     Sumon Test

Tips

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

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

云服务器 GPU云服务器水平垂直居中实现垂直居中 html css HTML+CSS

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

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

【HTML/CSS】CSS实现垂直水平居中

摘要：相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法元素已知宽度绝对定位反向偏移元素未知宽度绝对定位流体特性当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法元素已知宽度绝对定位 + margin反向偏移 html ...

CNZPH 2019-08-02 14:31 评论0 收藏0
【CSS】水平垂直居中的4种实现（宽高不定）

摘要：水平垂直居中的种方案宽高不定方案中我也给了宽高但并不是说宽高固定了。下面四种方案都是能够实现当父元素或子元素的宽高发生改变时依旧维持水平垂直居中布局的方案。水平垂直居中的4种方案(宽高不定) 方案中我也给了宽高,但并不是说宽高固定了。而是以为不给宽高无法看到效果。这个方案不固定宽高的是指,用这个方案之后,如果你父元素、子元素的宽高发生了改变,依旧可以保证是水平垂直居中的位置。下面四...

cppowboy 2019-08-29 14:21 评论0 收藏0
CSS水平或垂直居中技巧

摘要：适用情景单对象水平居中原理将子元素设置块级表格，再设置水平居中。结语有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。前言 css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（ps：特想找个地洞钻进去）。。。时隔两年，对于这个...

CastlePeaK 2019-08-30 11:22 评论0 收藏0
CSS那些事儿——居中布局

摘要：前言居中布局，是前端页面最常见的一种布局需求。下面将现今自己了解的居中布局方法作个小总结。水平居中行内元素在包含的父元素定义属性为。垂直水平居中对于这个问题，可以综合上述点进行实现。前言居中布局，是前端页面最常见的一种布局需求。刚开始学习前端时还是困扰了一段时间，后来看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面将现今自己了解的居...

JeOam 2019-08-29 13:05 评论0 收藏0